/* ============================================================
   JellyCat Design System — Design Tokens
   Source: Figma file fX1oN67McwdF9YUHtUEYxL
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Lato:wght@400;500;700&display=swap');

:root {
  /* ── Brand / Primary (Purple-Mauve) ── */
  /* Values confirmed directly from Figma token variables */
  --color-primary-50:  #f7f2f8;  /* brand/primary/50  — navbar bg, modal header */
  --color-primary-100: #ede3ef;  /* brand/primary/100 — modal border */
  --color-primary-200: #d5aed9;  /* ui/primary/200    — avatar bg  */
  --color-primary-300: #caaece;  /* brand/primary/300 — divider line */
  --color-primary-400: #b388b5;
  --color-primary-500: #9a729c;  /* brand/primary/500 — interactive default */
  --color-primary-600: #835c85;  /* brand/primary/600 — secondary btn text */
  --color-primary-700: #6b496d;  /* brand/primary/700 — text-secondary */
  --color-primary-800: #533755;  /* brand/primary/800 — btn pressed text */
  --color-primary-800-avatar: #432842; /* ui/primary/800 — avatar text */
  --color-primary-900: #3c2640;

  /* ── Brand / Secondary (Sage Green) ── */
  --color-secondary-50:  #eef4f3;
  --color-secondary-100: #d8eae8;
  --color-secondary-200: #bad5d2;
  --color-secondary-300: #97bdb9;
  --color-secondary-400: #7aa89f;
  --color-secondary-500: #68938a;
  --color-secondary-600: #537b73;
  --color-secondary-700: #40615b;
  --color-secondary-800: #2f4844;
  --color-secondary-900: #1f302e;
  --color-secondary-950: #142020;
  --color-secondary-975: #0c1413;

  /* ── Brand / Secondary (Amber) ── */
  --color-amber-50:  #fff9f0;
  --color-amber-100: #fff1da;
  --color-amber-200: #ffe4b3;
  --color-amber-300: #ffd488;
  --color-amber-400: #ffc96a;
  --color-amber-500: #ffc26d;
  --color-amber-600: #e8a748;
  --color-amber-700: #c48831;
  --color-amber-800: #9e6b21;
  --color-amber-900: #764f14;
  --color-amber-950: #52360b;
  --color-amber-975: #321f05;

  /* ── Brand / Tertiary (Periwinkle Blue) ── */
  --color-tertiary-50:  #f0f4fc;
  --color-tertiary-100: #dce8f8;
  --color-tertiary-200: #c4d9f2;
  --color-tertiary-300: #a9c5eb;
  --color-tertiary-400: #94b6e7;
  --color-tertiary-500: #83a8e2;
  --color-tertiary-600: #6289c8;
  --color-tertiary-700: #4a6dad;
  --color-tertiary-800: #355290;
  --color-tertiary-900: #223870;
  --color-tertiary-950: #152550;
  --color-tertiary-975: #0c1632;

  /* ── Interactive states ── */
  --color-interactive-default: #9a729c;
  --color-interactive-hover:   #7a527c;
  --color-interactive-pressed: #5e3a5f;
  --color-interactive-text:    #fafafa;

  /* ── Text ── */
  --color-text-primary:   #1a1a1a;
  --color-text-secondary: #6b496d;
  --color-text-disabled:  #ababab;
  --color-text-inverse:   #fafafa;

  /* ── Surfaces & Backgrounds ── */
  --color-surface:       #ffffff;
  --color-bg:            #fafafa;
  --color-bg-secondary:  #f5f5f5;

  /* ── Borders ── */
  --color-border-default: #9a729c;
  --color-border-strong:  #d4d4d4;

  /* ── Disabled ── */
  --color-disabled-fill: #e8e8e8;
  --color-disabled-text: #ababab;

  /* ── Gray Scale ── */
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e8e8e8;
  --color-gray-400: #d4d4d4;
  --color-gray-600: #808080;
  --color-gray-800: #2b2b2b;
  --color-gray-900: #1a1a1a;

  /* ── Semantic: Error ── */
  --color-error-bg:       #fff1ef;
  --color-error-surface:  #ffd5d1;
  --color-error-border:   #ff8175;
  --color-error-text:     #ff8175;
  --color-error-emphasis: #ff8175;

  /* ── Semantic: Success ── */
  --color-success-bg:      #eef4f3;
  --color-success-surface: #bad5d2;
  --color-success-border:  #d8eae8;
  --color-success-text:    #40615b;

  /* ── Semantic: Warning ── */
  --color-warning-bg:      #fff9f0;
  --color-warning-surface: #ffe4b3;
  --color-warning-border:  #fff1da;
  --color-warning-text:    #c48831;

  /* ── Semantic: Info ── */
  --color-info-bg:      #eef4ff;
  --color-info-surface: #cddcf7;
  --color-info-border:  #dce8f8;
  --color-info-text:    #2c4e8a;

  /* ── Typography ── */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Lato', system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;

  --leading-tight:  1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* ── Spacing ── */
  --spacing-2:  2px;
  --spacing-4:  4px;
  --spacing-6:  6px;
  --spacing-8:  8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* ── Border Radius ── */
  --radius-4:    4px;
  --radius-8:    8px;
  --radius-16:   16px;
  --radius-chip: 6px;
  --radius-pill: 9999px;

  /* Semantic aliases */
  --radius-btn:   var(--radius-pill);
  --radius-badge: var(--radius-pill);
  --radius-card:  var(--radius-16);
  --radius-input: var(--radius-8);
  --radius-modal: var(--radius-16);

  /* ── Shadows ── */
  --shadow-subtle:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-default: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-card:    0 2px 4px rgba(0,0,0,0.10);
  --shadow-hover:   0 8px 16px rgba(0,0,0,0.18);
  --shadow-modal:   0 8px 32px 0 rgba(0,0,0,0.20); /* Figma: DROP_SHADOW y:8 blur:32 spread:0 #000 20% */

  /* ── Transitions ── */
  --transition-fast:   100ms ease;
  --transition-normal: 180ms ease;
  --transition-slow:   300ms ease;
}

/* ============================================================
   Dark Mode Tokens
   Source: Brand color scales (Primary · Secondary · Amber · Tertiary)
   Activation: system prefers-color-scheme OR data-theme="dark"
   ============================================================ */

/* Shared dark token values — applied via both system + manual */
.dark-tokens {
  /* ── Surfaces & Backgrounds ── */
  --color-bg:            #1a0f1b;   /* Primary/975 — darkest page bg      */
  --color-bg-secondary:  #2a1a2b;   /* Primary/950 — sidebar, panels       */
  --color-surface:       #3c273d;   /* Primary/900 — cards, modals         */
  --color-surface-hover: #533755;   /* Primary/800 — hovered cards         */

  /* ── Text ── */
  --color-text-primary:   #fafafa;  /* Gray/50  — body copy                */
  --color-text-secondary: #dec9e0;  /* Primary/200 — labels, captions      */
  --color-text-disabled:  #737373;  /* Gray/500 — placeholder, disabled    */
  --color-text-inverse:   #1a1a1a;  /* for dark text on light elements     */

  /* ── Interactive — shift lighter for dark bg contrast ── */
  --color-interactive-default: #b291b4;  /* Primary/400                    */
  --color-interactive-hover:   #caaece;  /* Primary/300                    */
  --color-interactive-pressed: #9a729c;  /* Primary/500                    */
  --color-interactive-text:    #1a0f1b;  /* Primary/975 — text on filled btn*/

  /* ── Borders ── */
  --color-border-default: #835c85;  /* Primary/600 — inputs, outlines      */
  --color-border-strong:  #533755;  /* Primary/800 — dividers              */

  /* ── Disabled ── */
  --color-disabled-fill: #404040;   /* Gray/700                            */
  --color-disabled-text: #737373;   /* Gray/500                            */

  /* ── Semantic: Error ── */
  --color-error-bg:       #2d0f0d;  /* deep dark red — no brand red scale  */
  --color-error-surface:  #5c201a;
  --color-error-border:   #ff8175;  /* keep the error coral                */
  --color-error-text:     #ffb0a8;  /* lightened for dark bg readability   */
  --color-error-emphasis: #ff8175;

  /* ── Semantic: Success — from Secondary/Sage Green scale ── */
  --color-success-bg:      #0c1413;  /* Secondary/975                      */
  --color-success-surface: #2f4844;  /* Secondary/800                      */
  --color-success-border:  #68938a;  /* Secondary/500                      */
  --color-success-text:    #bad5d2;  /* Secondary/200 — readable on dark    */

  /* ── Semantic: Warning — from Amber scale ── */
  --color-warning-bg:      #321f05;  /* Amber/975                          */
  --color-warning-surface: #764f14;  /* Amber/900                          */
  --color-warning-border:  #ffc26d;  /* Amber/500                          */
  --color-warning-text:    #ffe4b3;  /* Amber/200 — readable on dark        */

  /* ── Semantic: Info — from Tertiary/Periwinkle Blue scale ── */
  --color-info-bg:      #0c1632;    /* Tertiary/975                        */
  --color-info-surface: #355290;    /* Tertiary/800                        */
  --color-info-border:  #83a8e2;    /* Tertiary/500                        */
  --color-info-text:    #c4d9f2;    /* Tertiary/200 — readable on dark      */

  /* ── Shadows — elevated opacity for depth on dark bg ── */
  --shadow-subtle:  0 1px 4px rgba(0,0,0,0.32);
  --shadow-default: 0 2px 8px rgba(0,0,0,0.40);
  --shadow-card:    0 2px 4px rgba(0,0,0,0.40);
  --shadow-hover:   0 8px 16px rgba(0,0,0,0.56);
  --shadow-modal:   0 8px 32px 0 rgba(0,0,0,0.64);
}

/* System preference — respects OS dark mode automatically */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ── Surfaces & Backgrounds ── */
    --color-bg:            #1a0f1b;
    --color-bg-secondary:  #2a1a2b;
    --color-surface:       #3c273d;
    --color-surface-hover: #533755;

    /* ── Text ── */
    --color-text-primary:   #fafafa;
    --color-text-secondary: #dec9e0;
    --color-text-disabled:  #737373;
    --color-text-inverse:   #1a1a1a;

    /* ── Interactive ── */
    --color-interactive-default: #b291b4;
    --color-interactive-hover:   #caaece;
    --color-interactive-pressed: #9a729c;
    --color-interactive-text:    #1a0f1b;

    /* ── Borders ── */
    --color-border-default: #835c85;
    --color-border-strong:  #533755;

    /* ── Disabled ── */
    --color-disabled-fill: #404040;
    --color-disabled-text: #737373;

    /* ── Semantic: Error ── */
    --color-error-bg:       #2d0f0d;
    --color-error-surface:  #5c201a;
    --color-error-border:   #ff8175;
    --color-error-text:     #ffb0a8;
    --color-error-emphasis: #ff8175;

    /* ── Semantic: Success (Secondary/Green) ── */
    --color-success-bg:      #0c1413;
    --color-success-surface: #2f4844;
    --color-success-border:  #68938a;
    --color-success-text:    #bad5d2;

    /* ── Semantic: Warning (Amber) ── */
    --color-warning-bg:      #321f05;
    --color-warning-surface: #764f14;
    --color-warning-border:  #ffc26d;
    --color-warning-text:    #ffe4b3;

    /* ── Semantic: Info (Tertiary/Blue) ── */
    --color-info-bg:      #0c1632;
    --color-info-surface: #355290;
    --color-info-border:  #83a8e2;
    --color-info-text:    #c4d9f2;

    /* ── Shadows ── */
    --shadow-subtle:  0 1px 4px rgba(0,0,0,0.32);
    --shadow-default: 0 2px 8px rgba(0,0,0,0.40);
    --shadow-card:    0 2px 4px rgba(0,0,0,0.40);
    --shadow-hover:   0 8px 16px rgba(0,0,0,0.56);
    --shadow-modal:   0 8px 32px 0 rgba(0,0,0,0.64);
  }
}

/* Manual override — add data-theme="dark" to <html> to force dark mode */
[data-theme="dark"] {
  /* ── Surfaces & Backgrounds ── */
  --color-bg:            #1a0f1b;
  --color-bg-secondary:  #2a1a2b;
  --color-surface:       #3c273d;
  --color-surface-hover: #533755;

  /* ── Text ── */
  --color-text-primary:   #fafafa;
  --color-text-secondary: #dec9e0;
  --color-text-disabled:  #737373;
  --color-text-inverse:   #1a1a1a;

  /* ── Interactive ── */
  --color-interactive-default: #b291b4;
  --color-interactive-hover:   #caaece;
  --color-interactive-pressed: #9a729c;
  --color-interactive-text:    #1a0f1b;

  /* ── Borders ── */
  --color-border-default: #835c85;
  --color-border-strong:  #533755;

  /* ── Disabled ── */
  --color-disabled-fill: #404040;
  --color-disabled-text: #737373;

  /* ── Semantic: Error ── */
  --color-error-bg:       #2d0f0d;
  --color-error-surface:  #5c201a;
  --color-error-border:   #ff8175;
  --color-error-text:     #ffb0a8;
  --color-error-emphasis: #ff8175;

  /* ── Semantic: Success (Secondary/Green) ── */
  --color-success-bg:      #0c1413;
  --color-success-surface: #2f4844;
  --color-success-border:  #68938a;
  --color-success-text:    #bad5d2;

  /* ── Semantic: Warning (Amber) ── */
  --color-warning-bg:      #321f05;
  --color-warning-surface: #764f14;
  --color-warning-border:  #ffc26d;
  --color-warning-text:    #ffe4b3;

  /* ── Semantic: Info (Tertiary/Blue) ── */
  --color-info-bg:      #0c1632;
  --color-info-surface: #355290;
  --color-info-border:  #83a8e2;
  --color-info-text:    #c4d9f2;

  /* ── Shadows ── */
  --shadow-subtle:  0 1px 4px rgba(0,0,0,0.32);
  --shadow-default: 0 2px 8px rgba(0,0,0,0.40);
  --shadow-card:    0 2px 4px rgba(0,0,0,0.40);
  --shadow-hover:   0 8px 16px rgba(0,0,0,0.56);
  --shadow-modal:   0 8px 32px 0 rgba(0,0,0,0.64);
}