/*
 * cf-vibe-design — design tokens
 *
 * Source of truth: Hex Safe 2 frontend
 *   src/design/theme/colors.ts
 *   src/design/theme/palette.ts
 *   src/design/theme/typography.ts
 *
 * Extracted as plain CSS custom properties so vanilla vibe apps can
 * consume without a React/MUI runtime. React-tier vibe apps can still
 * `var(--cvd-*)` from styled components / Emotion.
 *
 * Re-vendor cadence: when Hex Safe bumps their palette/typography,
 * sync this file. Drift trace lives in README.md.
 *
 * Class-prefix convention: `.cvd-*` (cf-vibe-design). Token-prefix:
 * `--cvd-*`. Both stable.
 */

:root {
  /* ── Color scales (raw hue palettes) ──────────────────────────── */

  --cvd-color-navy-50:  #FBFCFF;
  --cvd-color-navy-100: #F0F4FE;
  --cvd-color-navy-200: #DFE5F5;
  --cvd-color-navy-300: #D6DEF8;
  --cvd-color-navy-400: #C1D1F5;
  --cvd-color-navy-500: #AEC3F0;
  --cvd-color-navy-600: #355CA8;
  --cvd-color-navy-700: #13448F;
  --cvd-color-navy-800: #00357A;
  --cvd-color-navy-900: #001A42;

  --cvd-color-cyan-90:  #F1FEFD;
  --cvd-color-cyan-50:  #8AD2CE;
  --cvd-color-cyan-10:  #00B2AC;
  --cvd-color-cyan-5:   #04948F;

  --cvd-color-magenta-95: #FFF4F9;
  --cvd-color-magenta-90: #DA0C6F;
  --cvd-color-magenta-50: #F48BBE;
  --cvd-color-magenta-10: #FFE0EF;

  --cvd-color-orange-80: #FFF1E5;
  --cvd-color-orange-50: #FFD5B4;
  --cvd-color-orange-10: #F07D1F;

  --cvd-color-gray-100: #FFFFFF;
  --cvd-color-gray-90:  #FBFBFB;
  --cvd-color-gray-80:  #E3E4E7;
  --cvd-color-gray-70:  #AEAEAE;
  --cvd-color-gray-60:  #909090;
  --cvd-color-gray-50:  #868585;
  --cvd-color-gray-40:  #757575;
  --cvd-color-gray-30:  #515151;
  --cvd-color-gray-20:  #303034;
  --cvd-color-gray-10:  #1B1B1F;
  --cvd-color-gray-0:   #000000;

  /* ── Semantic tokens (use these in components, not raw scales) ── */

  /* Brand spine + interactive */
  --cvd-color-primary:        var(--cvd-color-navy-900);
  --cvd-color-primary-hover:  var(--cvd-color-navy-800);
  --cvd-color-primary-pressed: var(--cvd-color-navy-700);
  --cvd-color-on-primary:     var(--cvd-color-gray-100);

  --cvd-color-accent:         var(--cvd-color-cyan-10);
  --cvd-color-accent-hover:   var(--cvd-color-cyan-5);
  --cvd-color-accent-soft:    var(--cvd-color-cyan-90);

  /* Surfaces */
  --cvd-color-bg-page:        #F8F9FD;
  --cvd-color-bg-surface:     var(--cvd-color-gray-100);
  --cvd-color-bg-subtle:      var(--cvd-color-navy-50);
  --cvd-color-bg-strong:      var(--cvd-color-navy-100);
  --cvd-color-stroke:         #E6E7EB;
  --cvd-color-stroke-strong:  var(--cvd-color-navy-200);

  /* Text */
  --cvd-color-text-primary:   var(--cvd-color-navy-900);
  --cvd-color-text-header:    var(--cvd-color-navy-800);
  --cvd-color-text-subheader: var(--cvd-color-gray-30);
  --cvd-color-text-remark:    var(--cvd-color-gray-40);
  --cvd-color-text-disabled:  var(--cvd-color-gray-70);
  --cvd-color-text-on-dark:   var(--cvd-color-gray-100);
  --cvd-color-link:           var(--cvd-color-cyan-5);

  /* Status */
  --cvd-color-success:        #1F9D55;
  --cvd-color-success-bg:     #E6F8EE;
  --cvd-color-warning:        var(--cvd-color-orange-10);
  --cvd-color-warning-bg:     var(--cvd-color-orange-80);
  --cvd-color-error:          var(--cvd-color-magenta-90);
  --cvd-color-error-bg:       var(--cvd-color-magenta-10);
  --cvd-color-info:           var(--cvd-color-navy-700);
  --cvd-color-info-bg:        var(--cvd-color-navy-100);

  /* ── Typography ──────────────────────────────────────────────── */

  /* Poppins is the brand UI font (Hex Safe). Self-hosted woff2
   * shipped under fonts/ when present; system-ui fallback otherwise
   * so vibe apps render usably even without the font files. */
  --cvd-font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --cvd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — px values mirroring Hex Safe MUI scale, rendered
   * via rem so :root font-size scales globally. Matches lessons-
   * checklist convention. Pairs as (mobile / desktop) where Hex Safe
   * shrinks at <lg breakpoint — vibe apps can override mobile values
   * in a media query at the consumer if they need that responsiveness. */
  /* Bumped one step up 2026-05-09 — was 12–40px, now 14–48px.
     12px caption read too small under Poppins; the bump brings
     body to 18px which sits better with the chosen weight. */
  --cvd-text-h1:        3rem;       /* 48px */
  --cvd-text-h2:        2.5rem;     /* 40px */
  --cvd-text-h3:        2rem;       /* 32px */
  --cvd-text-h4:        1.5rem;     /* 24px */
  --cvd-text-body:      1.125rem;   /* 18px */
  --cvd-text-small:     1rem;       /* 16px */
  --cvd-text-caption:   0.875rem;   /* 14px */

  --cvd-line-tight:   1.25;
  --cvd-line-base:    1.5;
  --cvd-line-loose:   1.65;

  --cvd-weight-regular: 400;
  --cvd-weight-medium:  500;
  --cvd-weight-semibold: 600;

  /* ── Spacing (8px base, MUI-compatible) ─────────────────────── */

  --cvd-space-0:   0;
  --cvd-space-1:   0.25rem;   /*  4px */
  --cvd-space-2:   0.5rem;    /*  8px */
  --cvd-space-3:   0.75rem;   /* 12px */
  --cvd-space-4:   1rem;      /* 16px */
  --cvd-space-5:   1.5rem;    /* 24px */
  --cvd-space-6:   2rem;      /* 32px */
  --cvd-space-7:   3rem;      /* 48px */
  --cvd-space-8:   4rem;      /* 64px */

  /* ── Radius ───────────────────────────────────────────────── */

  --cvd-radius-sm:   4px;
  --cvd-radius-md:   8px;       /* Hex Safe default (theme.spacing(1)) */
  --cvd-radius-lg:   12px;
  --cvd-radius-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────── */

  --cvd-shadow-sm:   0 1px 2px rgba(0, 26, 66, 0.05);
  --cvd-shadow-md:   0 2px 8px rgba(0, 26, 66, 0.08);
  --cvd-shadow-lg:   0 8px 24px rgba(0, 26, 66, 0.12);

  /* ── Motion ─────────────────────────────────────────────── */

  --cvd-ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --cvd-dur-fast: 120ms;
  --cvd-dur-base: 200ms;

  /* ── Z-index scale ───────────────────────────────────────── */

  /* Stacking layers for fixed/absolute UI. App-level z-index values
   * should stay below 100; the design system reserves 100+ for slide-in
   * panels, modals, toasts. Keeps cross-component layering predictable. */
  --cvd-z-overlay:  100;     /* slide-in panels (chat) */
  --cvd-z-modal:    200;     /* future: modal / dialog */
  --cvd-z-toast:    300;     /* future: toast / snackbar */

  /* ── Chat panel (cvd-chat-*) ────────────────────────────── */

  /* Component-scoped tokens — promoted from chat.css so apps that need
   * a wider/narrower panel can override at :root without forking the
   * chat stylesheet. */
  --cvd-chat-width:           380px;
  --cvd-chat-shift-duration:  var(--cvd-dur-base);
}