/* ============================================================================
   SessionVault design tokens.
   Palette + type, aligned to the approved brand board (Canvas / Surface /
   Border / Ink / Muted / Signal Blue / Live Green) and the underlying product
   shell (HarrierSecurity/task-tracker). Load fonts/brand.css first, then this.

   Type: Söhne (display + UI) — previews substitute **Geist** (see fonts/brand.css).
         JetBrains Mono — labels, metadata, timestamps, technical cues.
   Accent budget: neutrals >90%, Signal Blue <10%, Live Green <2%.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* ---- Surfaces — flat by default; depth comes from spacing + contrast ----- */
  --sv-bg:        #0A0D12;  /* Canvas — page background                        */
  --sv-bg-2:      #07090d;  /* deepest well — rail, inset code                 */
  --sv-surface:   #101720;  /* Surface — panels, cards, the working plane      */
  --sv-panel:     #101720;  /* alias of Surface (section panels)               */
  --sv-raised:    #161d27;  /* raised controls, chips, buttons                 */
  --sv-card:      #0e151d;  /* dense cards sitting just above Canvas           */

  /* ---- Borders — full borders only, never side-stripes -------------------- */
  --sv-border:    #202A34;  /* Border — primary structural line                */
  --sv-soft:      #1a222e;  /* soft border on cards / inputs                   */
  --sv-hairline:  #151b23;  /* faintest divider                               */

  /* ---- Text --------------------------------------------------------------- */
  --sv-text:      #EEF3F8;  /* Ink — main content                             */
  --sv-muted:     #9AA6B2;  /* Muted — metadata, secondary context            */
  --sv-faint:     #7e8b9a;  /* compact labels, captions (AA on Canvas ~5.6:1)  */
  --sv-dim:       #515e6e;  /* disabled, idle dots, separators                */

  /* ---- Signal Blue — the one accent: focus + action ----------------------- */
  --sv-blue:         #4A8CFF;  /* Signal Blue                                 */
  --sv-blue-surface: #14243c;  /* filled action surface, active nav, selection*/
  --sv-blue-border:  #2f5a96;  /* border on blue surfaces                     */
  --sv-blue-hover:   #1b3559;  /* primary button hover                        */

  /* ---- Status taxonomy (session memory) ----------------------------------- */
  --sv-green:     #74D99F;  /* Live Green — live status / "checked" (use <2%)  */
  --sv-decided:   #4A8CFF;  /* decided  → blue dot                            */
  --sv-checked:   #74D99F;  /* checked  → green dot                           */
  --sv-blocked:   #ff6b6b;  /* blocked  → red dot                            */
  --sv-safe:      #6f7c8b;  /* safe to touch → gray dot                      */

  /* ---- Extended workflow accents (in-app only; not for marketing) --------- */
  --sv-amber:     #f2b84b;  /* missing context / gap (app)                    */
  --sv-amber-surface: #2f2411;
  --sv-red:       #ff6b6b;  /* blocker / attention                           */
  --sv-red-surface:   #321819;
  --sv-red-border:    #7e3739;
  --sv-red-text:      #ffc7c7;
  --sv-red-action:    #421d21;
  --sv-purple:    #bc8cff;  /* one in-app phase tint — never on marketing      */

  /* ---- Type families ------------------------------------------------------ */
  --sv-sans: 'Geist', 'Söhne', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sv-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Radii -------------------------------------------------------------- */
  --sv-r-sm:   6px;
  --sv-r-md:  10px;
  --sv-r-round: 999px;

  /* ---- Spacing ------------------------------------------------------------ */
  --sv-space-xs:  6px; --sv-space-sm:  8px; --sv-space-md: 12px;
  --sv-space-lg: 16px; --sv-space-xl: 24px; --sv-space-2xl:32px;

  /* ---- Elevation — overlays + tiny glows only ----------------------------- */
  --sv-shadow-menu:   0 18px 44px rgba(0,0,0,.4);
  --sv-shadow-drawer: -24px 0 55px rgba(0,0,0,.42);
  --sv-shadow-modal:  0 16px 60px rgba(0,0,0,.62);
  --sv-glow-status:   0 0 0 3px rgba(116,217,159,.14);

  /* ---- Motion ------------------------------------------------------------- */
  --sv-ease: cubic-bezier(.4, 0, .2, 1);
  --sv-dur-fast: 120ms;
  --sv-dur-mid:  160ms;
}

/* ============================================================================
   SEMANTIC TYPE
   Display + UI ride Söhne/Geist, kept LIGHT and large for a calm, editorial
   feel. Labels + technical cues ride JetBrains Mono, uppercase, tracked.
   ============================================================================ */

.sv-display {        /* hero — large, light, editorial */
  font-family: var(--sv-sans);
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--sv-text);
}

.sv-h1 {
  font-family: var(--sv-sans);
  font-size: clamp(30px, 3.8vw, 42px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--sv-text);
}

.sv-h2 {             /* section title */
  font-family: var(--sv-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--sv-text);
}

.sv-h3 {             /* card title */
  font-family: var(--sv-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sv-text);
}

.sv-body {
  font-family: var(--sv-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sv-text);
}

.sv-meta {           /* secondary supporting copy */
  font-family: var(--sv-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--sv-muted);
}

.sv-label {          /* eyebrow / column label — MONO, the technical seasoning */
  font-family: var(--sv-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-faint);
}

.sv-code {           /* IDs, paths, payloads, status rows, ⌘K hints */
  font-family: var(--sv-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sv-muted);
}