/* ============================================================================
   PRISM — Colors & Type
   ----------------------------------------------------------------------------
   Direct port of the SwiftUI `Theme` enum in
   `Shared/Utilities/Theme.swift`. Every brand color matches a Swift token
   1:1; dynamic neutrals carry their light/dark hex pair as documented in
   the source.

   Vibe: warm earthy "MissionPilot" palette. Cream canvas, bark text,
   tangerine pin/accent, navy primary, olive success, rust danger, mustard
   warning. Crimson Q1-priority. Beacon Violet reserved for AI surfaces.

   Type stack mirrors SwiftUI native — SF Pro on Apple platforms, with a
   warm transitional serif (Source Serif 4) for display-only moments on
   the web where a designer wants a touch more character than the system
   sans. UI code never uses the serif; it is doc/marketing flavor.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

:root {
  /* ───────────────── BRAND — fixed across light/dark ─────────────────── */
  --prism-navy:          #1E3D56;   /* primary brand, page header band, links */
  --prism-navy-mid:      #2E5572;
  --prism-harbor:        #4A7A9B;   /* secondary blue, mobile tab bar, "internal" person */
  --prism-crimson:       #9B2335;   /* Quadrant 1 (urgent + important) */
  --prism-crimson-deep:  #721828;
  --prism-tangerine:     #D4621A;   /* PIN, active mobile tab, primary accent */
  --prism-tangerine-deep:#8C3810;
  --prism-tangerine-mid: #EEA070;
  --prism-success:       #4A5E44;   /* olive — "done", outcomes, "customer" people */
  --prism-warning:       #9E6B22;   /* mustard — Quadrant 3, warning callouts */
  --prism-danger:        #9E4040;   /* rust — overdue, destructive */
  --prism-beacon:        #6B5A85;   /* AI surfaces ONLY — Beacon panel, sparkles */

  /* ───────────────── DYNAMIC NEUTRALS — light values ─────────────────── */
  --prism-bark:          #2B2420;   /* headings, strong body */
  --prism-text-primary:  #4A4440;   /* body */
  --prism-text-muted:    #8A7E76;   /* secondary labels, captions */
  --prism-warm-border:   #E4DDD4;   /* hairline borders, cards, dividers */
  --prism-canvas:        #F8F6F1;   /* page background — light warm cream (lighter & less orange than PRISM's native #F5F0E8) */
  --prism-surface:       #FFFFFF;   /* card / panel surface */
  --prism-editor-field:  #F9F6F1;   /* input fill (canvas ~60% over surface, pre-flattened) */

  /* ───────────────── SOFT TINTS — light values ───────────────────────── */
  /* Each tint = the brand color at ~12-18% opacity over canvas, pre-flat.
     Used for pill backgrounds, sidebar selection, soft callouts.        */
  --prism-navy-tint:     #D6E6F2;
  --prism-sky-tint:      #E8F2F8;   /* hover affordance, current selection in lists */
  --prism-crimson-tint:  #FAE8EA;
  --prism-tangerine-tint:#FAEEE4;
  --prism-success-tint:  #E8EFE4;
  --prism-warning-tint:  #FBF0E2;
  --prism-danger-tint:   #F8EDEE;
  --prism-beacon-tint:   #EDE8F5;

  /* ───────────────── SEMANTIC ALIASES ────────────────────────────────── */
  --fg-1: var(--prism-bark);           /* strongest text */
  --fg-2: var(--prism-text-primary);   /* body */
  --fg-3: var(--prism-text-muted);     /* captions, meta */
  --fg-on-dark: #FFFFFF;               /* text on navy/crimson */
  --bg-page:     var(--prism-canvas);
  --bg-surface:  var(--prism-surface);
  --bg-field:    var(--prism-editor-field);
  --border-hairline: var(--prism-warm-border);
  --link:        var(--prism-navy);

  /* PRISM line types (action / outcome / prose) */
  --line-action:  var(--prism-harbor);
  --line-outcome: var(--prism-success);
  --line-prose:   var(--prism-text-primary);

  /* Covey / Quadrant board */
  --q1-urgent-important:      var(--prism-crimson);   /* danger — do first */
  --q2-important-not-urgent:  var(--prism-navy);      /* plan / schedule */
  --q3-urgent-not-important:  var(--prism-warning);   /* delegate */
  --q4-neither:               var(--prism-text-muted);/* drop */

  /* ───────────────── RADII ───────────────────────────────────────────── */
  /* PrismPanelCard = 12; prismCard helper default = 12; chips/pills =
     full capsule; sidebar row = 6; segment buttons = capsule; editor
     fields = 6.  Three sizes cover everything. */
  --radius-sm:   6px;   /* inputs, sidebar rows, segment pills */
  --radius-md:   8px;   /* dashboard stat tiles, metric tiles */
  --radius-lg:   12px;  /* panel cards, sheets, hero containers */
  --radius-pill: 9999px;

  /* ───────────────── SPACING ─────────────────────────────────────────── */
  /* PRISM is dense by macOS convention — 4/6/8/12/16/20/24 are the
     literal values that appear most often in the SwiftUI source
     (.padding(.horizontal, 16).padding(.vertical, 11), etc).        */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;

  /* ───────────────── SHADOWS ─────────────────────────────────────────── */
  /* PRISM avoids heavy shadows — borders do most of the elevation work.
     The one exception is the iPhone quick-add FAB: a soft black 25% drop
     at y=3 r=6.                                                       */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--prism-warm-border);
  --shadow-card: 0 1px 2px rgba(43, 36, 32, 0.04);
  --shadow-fab:  0 3px 6px rgba(0, 0, 0, 0.25);
  --shadow-popover: 0 8px 24px rgba(43, 36, 32, 0.12);

  /* ───────────────── TYPE — families ─────────────────────────────────── */
  /* PRISM ships IBM Plex Sans for UI — warm, software-friendly grotesque
     designed for technical interfaces; matches SF Pro's optical weight
     while bringing a touch more brand character. Native Apple apps may
     keep SF Pro; the web mirror lands close. Source Serif 4 is the
     display face for editorial moments only.                          */
  --font-sans:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
                  "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --font-display: "Source Serif 4", ui-serif, Charter, "Iowan Old Style",
                  "Apple Garamond", Georgia, serif;   /* docs/marketing only */
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo,
                  Consolas, "Roboto Mono", monospace;

  /* ───────────────── TYPE — sizes (SwiftUI semantic equivalents) ─────── */
  /* SwiftUI .largeTitle ≈ 34px; .title ≈ 28; .title2 ≈ 22; .title3 ≈ 20;
     .headline ≈ 17 semibold; .body ≈ 17; .callout ≈ 16; .subheadline ≈ 15;
     .footnote ≈ 13; .caption ≈ 12; .caption2 ≈ 11.                    */
  --type-largeTitle:   34px;
  --type-title:        28px;
  --type-title2:       22px;
  --type-title3:       20px;
  --type-headline:     17px;
  --type-body:         17px;
  --type-callout:      16px;
  --type-subheadline:  15px;
  --type-footnote:     13px;
  --type-caption:      12px;
  --type-caption2:     11px;

  /* ───────────────── TYPE — line heights / tracking ──────────────────── */
  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.45;
  --lh-relaxed:1.55;

  /* Used on the Dashboard hero "PRISM" wordmark in the Mac app:
       .font(.system(size: 40, weight: .black)).tracking(-1.2)        */
  --tracking-display: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-caps:    0.06em;   /* sidebar section headers like "VIEWS" */

  /* ───────────────── MOTION ──────────────────────────────────────────── */
  /* Two durations, two easings. Hover & state transitions use ease-out 120ms
     (matches `.animation(.easeOut(duration: 0.12))` throughout the source).
     Sheets and view swaps use ease-in-out 150ms.                        */
  --motion-fast:     120ms cubic-bezier(0.2, 0, 0, 1);
  --motion-medium:   150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ───────────────── DARK MODE ──────────────────────────────────────────
   Brand colors stay; dynamic neutrals + tints flip. Mirrors the
   `Color.dynamic(light:, dark:)` calls in Theme.swift.                  */
/* DARK MODE TEMPORARILY DISABLED per request 2026-05-30.
   To restore: delete "and (min-width: 100000px)" from the line below. */
@media (prefers-color-scheme: dark) and (min-width: 100000px) {
  :root {
    --prism-bark:          #F0E9DF;
    --prism-text-primary:  #D8D2C8;
    --prism-text-muted:    #9B9389;
    --prism-warm-border:   #3A3530;
    --prism-canvas:        #161412;
    --prism-surface:       #221F1C;
    --prism-editor-field:  #1B1816;
    --prism-navy-tint:     #1E2D3B;
    --prism-sky-tint:      #1A2530;
    --prism-crimson-tint:  #3A1F23;
    --prism-tangerine-tint:#3A271A;
    --prism-success-tint:  #1F2A1D;
    --prism-warning-tint:  #332618;
    --prism-danger-tint:   #33201F;
    --prism-beacon-tint:   #28223A;
  }
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES
   Drop this stylesheet on a page and headings/body/etc. inherit the look.
   ========================================================================== */

html, body {
  background: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-1);
  font-family: var(--font-sans);    /* swap to var(--font-display) for editorial */
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--type-largeTitle); font-weight: 800; }
h2 { font-size: var(--type-title);      font-weight: 700; }
h3 { font-size: var(--type-title2);     font-weight: 700; }
h4 { font-size: var(--type-title3);     font-weight: 600; }
h5 { font-size: var(--type-headline);   font-weight: 600; }
h6 { font-size: var(--type-subheadline);font-weight: 600;
     text-transform: uppercase; letter-spacing: var(--tracking-caps);
     color: var(--fg-3); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity var(--motion-fast);
}
a:hover { opacity: 0.75; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-field);
  border: 1px solid var(--border-hairline);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
pre {
  background: var(--bg-field);
  border: 1px solid var(--border-hairline);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--space-6) 0;
}

small, .caption {
  font-size: var(--type-caption);
  color: var(--fg-3);
}

/* Sidebar section header treatment ("VIEWS", "PRODUCTIVITY", etc) */
.section-eyebrow {
  font-size: var(--type-caption2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

::selection { background: var(--prism-sky-tint); color: var(--fg-1); }

/* ============================================================================
   LEGACY COMPATIBILITY LAYER
   ----------------------------------------------------------------------------
   The marketing site was built dark-mode-first with its own variable names
   and a Google-blue gradient palette. This block re-points every legacy name
   at a PRISM token so the existing markup flips to the warm light palette
   WITHOUT renaming anything in the pages. PRISM is now the single root:
   change a value in :root above and the whole site follows.

   Per PRISM rules: no gradients (gradient start == end → flat fill),
   no heavy shadows (collapsed to hairline / soft card).
   ========================================================================== */
:root {
  /* Brand blues → PRISM navy / harbor */
  --primary-blue:           var(--prism-navy);
  --accent-blue:            var(--prism-harbor);
  --text-accent:            var(--prism-navy);

  /* Gradients flattened — both stops equal → solid navy, no gradient */
  --accent-gradient-start:  var(--prism-navy);
  --accent-gradient-end:    var(--prism-navy);

  /* Backgrounds: dark stack → warm light surfaces */
  --bg-primary:    var(--prism-canvas);    /* page */
  --bg-secondary:  var(--prism-surface);   /* sections / cards */
  --bg-tertiary:   var(--prism-navy-tint);   /* light blue — pops on the cream canvas (was editor-field, which now blends) */
  --bg-elevated:   var(--prism-surface);

  /* Text: white-on-dark → bark-on-cream */
  --text-primary:   var(--prism-bark);
  --text-secondary: var(--prism-text-primary);
  --text-tertiary:  var(--prism-text-muted);

  /* Borders → warm hairline */
  --border-subtle:  var(--prism-warm-border);
  --border-medium:  var(--prism-warm-border);

  /* Shadows collapsed to PRISM (borders carry elevation) */
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-card);
  --shadow-xl: var(--shadow-popover);

  /* Type: Outfit/Inter → PRISM IBM Plex Sans (display = Source Serif 4) */
  --font-heading: var(--font-sans);
  --font-body:    var(--font-sans);
}

/* Gradient text utility → flat navy fill (no gradient per PRISM) */
.text-gradient {
  background: none !important;
  -webkit-text-fill-color: var(--prism-navy) !important;
  color: var(--prism-navy) !important;
}