/* VaultCap design tokens — C-29 hex-exempt (tokens.css). */

/* —— Base theme —— */
:root {
  --bg: #060a12; --bg2: #0a1220; --bg3: #121c2e;
  --steel: #1a2332; --steel-mid: #243044; --steel-light: #2e3d54;
  --steel-ridge: rgba(255,255,255,0.05);
  --navy: #0a1220; --navy-deep: #060a12;
  --gold: #D4A017; --gold-light: #E8C84A; --gold-dark: #9A7410;
  --gold-seal: linear-gradient(120deg, #9A7410 0%, #E8C84A 35%, #D4A017 55%, #7A5A0E 100%);
  --vault-panel-bg: linear-gradient(165deg, rgba(26,35,50,0.92) 0%, rgba(10,18,32,0.96) 100%);
  --vault-panel-border: rgba(212,160,23,0.22);
  --vault-panel-inset: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.35);
  --vault-panel-shadow: 0 8px 32px rgba(2,6,19,0.55), 0 2px 8px rgba(0,0,0,0.28);
  --glass: rgba(255,255,255,0.05); --glass2: rgba(255,255,255,0.08); --glass3: rgba(255,255,255,0.12);
  --border: rgba(255,255,255,0.12); --border2: rgba(255,255,255,0.18); --border3: rgba(255,255,255,0.28);
  --text: #f4f6fa; --text2: #b8c0cc; --text3: #7a8494;
  --accent: #D4A017; --accent-fg: #060a12; --glow: rgba(212,160,23,0.18);
  --cap-accent: #D4A017; --cap-accent-contrast: #060a12;
  --purple: #a8b4c8; --indigo: #E8C84A;
  --ok: #30d158; --warn: #ff9f0a; --err: #ff453a; --info: #64d2ff;
  --on-accent: #ffffff;
  --r: 10px; --rsm: 6px; --rlg: 14px; --rxl: 18px; --rfull: 9999px;
  --ease: cubic-bezier(0.25,0.46,0.45,0.94); --spring: cubic-bezier(0.34,1.56,0.64,1);
  --t: all 0.25s var(--ease);
  --shadow: 0 8px 30px rgba(2,6,19,0.55); --shadowlg: 0 24px 80px rgba(1,3,12,0.78);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Space Grotesk", sans-serif;
  --font-display-title: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Cinzel", "Space Grotesk", sans-serif;
  --mono: "SF Mono", ui-monospace, "IBM Plex Mono", "Fira Code", monospace;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Space Grotesk", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "IBM Plex Mono", "Fira Code", monospace;
  /* Tab bar: content height only; safe-area applied once in --tabh */
  --tab-content-h: 56px;
  --tabh: calc(var(--tab-content-h) + env(safe-area-inset-bottom, 0px));
  --shell-bp: 700px; /* shell chrome: tabs below this width; sidebar at ≥700 */
  --sbw: 280px;
  --st: env(safe-area-inset-top); --sb: env(safe-area-inset-bottom);

  /* Typography scale */
  --fs-display: 2.5rem; --fs-title: 1.375rem; --fs-section: 1.125rem;
  --fs-body: 0.9375rem; --fs-secondary: 0.8125rem; --fs-label: 0.75rem;
  --fs-meta: 0.6875rem; --fs-mono: 0.875rem;
  --fs-hero: 2.25rem; --fs-heading: 1.0625rem;
  /* Extended aliases */
  --fs-xs: 0.6875rem; --fs-sm: 0.75rem; --fs-md: 1rem; --fs-lg: 1.125rem; /* xs floor = 11pt HIG */
  --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem;
  --lh-tight: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --lh-body: 1.5;
  --ls-tight: -0.3px; --ls-normal: 0.02em; --ls-wide: 0.06em; --ls-widest: 0.14em;
  --ls-display: 0.12em;
  --fw-light: 300; --fw-normal: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900;
  --fw-semi: 600; --fw-regular: 400;

  /* Spacing — 8px base grid (+ dashed aliases for older call sites) */
  --sp1: 8px; --sp2: 16px; --sp3: 24px; --sp4: 32px; --sp5: 40px; --sp6: 56px;
  --sp-1: var(--sp1); --sp-2: var(--sp2); --sp-3: var(--sp3); --sp-4: var(--sp4);
  --card-br: 10px; --section-gap: 28px;
  /* Display font for numbers */
  --font-display: "SF Mono", ui-monospace, "IBM Plex Mono", monospace;

  /* Depth / Shadow system */
  --ds-0: none;
  --ds-1: 0 1px 3px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12);
  --ds-2: 0 4px 12px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.16);
  --ds-3: 0 8px 28px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.22);
  --ds-4: 0 16px 56px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.3);
  --ds-glow: 0 0 0 1px var(--glow), 0 4px 16px var(--glow);

  /* Blur hierarchy */
  --blur-xs: blur(4px); --blur-sm: blur(8px);
  --blur-md: blur(16px); --blur-lg: blur(24px); --blur-xl: blur(48px);

  /* Motion tokens */
  --dur-instant: 50ms; --dur-fast: 180ms; --dur-normal: 320ms;
  --dur-slow: 520ms; --dur-lazy: 780ms;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --ease-decel: cubic-bezier(0,0,0.2,1);

  /* Component sizes */
  --sz-xs: 24px; --sz-sm: 32px; --sz-md: 40px; --sz-lg: 48px; --sz-xl: 56px;

  --chart-1: rgba(255,255,255,0.92);
  --chart-2: rgba(255,255,255,0.72);
  --chart-3: rgba(255,255,255,0.52);
  --chart-4: rgba(255,255,255,0.36);
  --chart-5: rgba(255,255,255,0.22);
  /* Typography */
  --text-display: clamp(32px,5vw,64px);
  --text-h1: clamp(24px,3.5vw,48px);
  --text-h2: clamp(20px,2.8vw,36px);
  --text-h3: clamp(16px,2vw,24px);
  --text-body: 15px;
  --text-small: 13px;
  --text-caption: 12px;
  --text-micro: 11px;
  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  /* Elevation */
  --shadow-1: 0 1px 3px rgba(0,0,0,.2);
  --shadow-2: 0 4px 12px rgba(0,0,0,.3);
  --shadow-3: 0 8px 24px rgba(0,0,0,.4);
  --shadow-overlay: 0 16px 48px rgba(0,0,0,.6);
  /* Animation */
  --anim-fast: 140ms;
  --anim-normal: 220ms;
  --anim-slow: 340ms;
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);

  /* Semantic aliases */
  --surface: var(--glass);
  --surface-2: var(--glass2);
  --text-primary: var(--text);
  --text-secondary: var(--text2);
  --success: #ffffff;
  --warning: #a3a3a3;
  --danger: #737373;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
}

/* —— Light theme —— */
body.light {
  --bg: #f4f6f9;
  --bg2: #e8ecf2;
  --bg3: #d8dfe8;
  --steel: #2a3548;
  --steel-mid: #3d4f68;
  --steel-light: #526480;
  --steel-ridge: rgba(0,0,0,0.04);
  --navy: #0a1220;
  --navy-deep: #060a12;
  --gold: #D4A017;
  --gold-light: #E8C84A;
  --gold-dark: #9A7410;
  --gold-seal: linear-gradient(120deg, #9A7410 0%, #E8C84A 40%, #D4A017 60%, #7A5A0E 100%);
  --vault-panel-bg: linear-gradient(165deg, #ffffff 0%, #f0f3f8 100%);
  --vault-panel-border: rgba(10,18,32,0.12);
  --vault-panel-inset: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(10,18,32,0.06);
  --vault-panel-shadow: 0 8px 28px rgba(10,18,32,0.08), 0 2px 6px rgba(10,18,32,0.04);
  --glass: rgba(10,18,32,.04);
  --glass2: rgba(10,18,32,.06);
  --glass3: rgba(10,18,32,.09);
  --border: rgba(10,18,32,.12);
  --border2: rgba(10,18,32,.18);
  --border3: rgba(10,18,32,.28);
  --text: #0a1220;
  --text2: #2a3548;
  --text3: #526480;
  --accent: #0a1220;
  --accent-fg: #ffffff;
  --cap-accent: #0a1220;
  --cap-accent-contrast: #ffffff;
  --glow: rgba(212,160,23,0.14);
  --purple: #333333;
  --chart-1: rgba(0,0,0,0.88);
  --chart-2: rgba(0,0,0,0.68);
  --chart-3: rgba(0,0,0,0.48);
  --chart-4: rgba(0,0,0,0.32);
  --chart-5: rgba(0,0,0,0.18);
  --ok: #1a8c3a;
  --warn: #c47800;
  --err: #cc2200;
  --info: #0077b6;
  --on-accent: #ffffff;
  --input: rgba(0,0,0,.05);
  --r: 14px;
  --shadow: 0 4px 24px rgba(0,0,0,.08);
  --shadowlg: 0 16px 56px rgba(0,0,0,.16);
}

/* —— Cap foundation —— */
:root {
  /* ── Brand core ── */
  --cap-gold: #c9a227;
  --cap-gold-soft: rgba(201, 162, 39, 0.35);
  --cap-accent: var(--cap-gold);          /* apps override this */
  --cap-accent-contrast: #0a0e17;         /* text color on accent */

  /* ── Surfaces (dark — default) ── */
  --cap-bg: #0a0e17;
  --cap-bg-2: #111827;
  --cap-surface: rgba(244, 240, 232, 0.04);
  --cap-surface-2: rgba(244, 240, 232, 0.07);
  --cap-border: rgba(244, 240, 232, 0.10);
  --cap-border-strong: rgba(244, 240, 232, 0.18);

  /* ── Text ── */
  --cap-text: #f4f0e8;
  --cap-text-dim: #9ca3af;
  --cap-text-faint: #6b7280;

  /* ── Semantic ── */
  --cap-success: #34d399;
  --cap-warning: #fbbf24;
  --cap-danger: #f87171;
  --cap-info: #a3a3a3;

  /* ── Type scale (fluid, 320 → 2560) ── */
  --cap-font-body: system-ui, -apple-system, 'Space Grotesk', sans-serif;
  --cap-font-display: system-ui, -apple-system, 'Space Grotesk', sans-serif;
  --cap-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --cap-text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --cap-text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --cap-text-md: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --cap-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --cap-text-xl: clamp(1.4rem, 1.25rem + 0.8vw, 1.875rem);
  --cap-text-2xl: clamp(1.8rem, 1.5rem + 1.6vw, 2.8rem);
  --cap-text-3xl: clamp(2.4rem, 1.9rem + 2.8vw, 4.2rem);

  /* ── Spacing scale (4px base) ── */
  --cap-space-1: 4px;
  --cap-space-2: 8px;
  --cap-space-3: 12px;
  --cap-space-4: 16px;
  --cap-space-5: 24px;
  --cap-space-6: 32px;
  --cap-space-7: 48px;
  --cap-space-8: 64px;
  --cap-space-9: 96px;
  --cap-space-section: clamp(64px, 10vw, 120px);

  /* ── Radii ── */
  --cap-radius-sm: 8px;
  --cap-radius-md: 12px;
  --cap-radius-lg: 18px;
  --cap-radius-xl: 28px;
  --cap-radius-pill: 999px;

  /* ── Elevation (shadow + border pairing) ── */
  --cap-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --cap-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.30);
  --cap-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.40);
  --cap-shadow-glow: 0 0 0 1px var(--cap-border), 0 8px 32px rgba(0, 0, 0, 0.35);
  --cap-shadow-accent: 0 8px 28px color-mix(in srgb, var(--cap-accent) 28%, transparent);

  /* ── Glass ── */
  --cap-glass-bg: rgba(16, 20, 32, 0.72);
  --cap-glass-blur: blur(20px) saturate(150%);
  --cap-glass-border: rgba(244, 240, 232, 0.12);

  /* ── Layout ── */
  --cap-max: 1120px;
  --cap-max-wide: 1440px;
  --cap-gutter: clamp(16px, 4vw, 32px);
  --cap-safe-t: env(safe-area-inset-top, 0px);
  --cap-safe-b: env(safe-area-inset-bottom, 0px);
  --cap-touch-target: 44px;

  /* ── Motion ── */
  --cap-ease: cubic-bezier(0.22, 1, 0.36, 1);        /* signature out-quint */
  --cap-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cap-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cap-dur-fast: 150ms;
  --cap-dur-base: 280ms;
  --cap-dur-slow: 600ms;
  --cap-dur-reveal: 800ms;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  [data-cap-theme="auto"] {
    --cap-bg: #faf8f4;
    --cap-bg-2: #f0ede6;
    --cap-surface: rgba(10, 14, 23, 0.04);
    --cap-surface-2: rgba(10, 14, 23, 0.07);
    --cap-border: rgba(10, 14, 23, 0.10);
    --cap-border-strong: rgba(10, 14, 23, 0.20);
    --cap-text: #131722;
    --cap-text-dim: #4b5563;
    --cap-text-faint: #9ca3af;
    --cap-glass-bg: rgba(250, 248, 244, 0.78);
    --cap-glass-border: rgba(10, 14, 23, 0.10);
    color-scheme: light;
  }
}

:root {
  --cap-desktop-bg: #0a0a0f;
  --cap-sidebar-w: 248px;
  --cap-sidebar-w-wide: 272px;
}

:root {
  /* migrated leftover hex */
  --vc-hex-dddddd: #dddddd;
  --vc-hex-aaaaaa: #aaaaaa;
  --vc-hex-d4af37: #d4af37;
  --vc-hex-f5e070: #f5e070;
  --vc-hex-ffc800: #ffc800;
  --vc-hex-16a34a: #16a34a;
  --vc-hex-dc2626: #dc2626;
  --vc-hex-d97706: #d97706;
  --vc-hex-0284c7: #0284c7;
  --vc-hex-1a1a1a: #1a1a1a;
  --vc-hex-fab: #fab;
  --vc-hex-f4f6fa: #f4f6fa;
  --vc-hex-a3a3a3: #a3a3a3;
  --vc-hex-0af: #0af;
}