/* ============================================================
   DEMOS — Brand Tokens
   Single source of truth for color, type, spacing, radius,
   shadow and motion. Engineer-ready CSS custom properties.
   Privacy note: Plus Jakarta Sans must be SELF-HOSTED in
   production (no Google Fonts CDN call). See typography spec.
   ============================================================ */

:root {
  /* ---- Core palette (locked) ---------------------------- */
  --color-base:        #FAFAFA; /* warm white page background */
  --color-forest:      #2D4033; /* primary brand */
  --color-forest-light:#3D5A47; /* hover, subtle bg */
  --color-forest-pale: #E8EDE9; /* borders, dividers */
  --color-sage:        #8BA693; /* secondary text, support UI */
  --color-sage-light:  #B5C9BB; /* inactive, gentle highlight */
  --color-sage-pale:   #F0F4F1; /* subtlest bg, alt rows */
  --color-maple:       #DC3545; /* action accent — use sparingly */
  --color-maple-dark:  #C82333; /* maple hover/pressed */
  --color-charcoal:    #1A1A2E; /* body text, navy undertone */
  --color-warm-gray:   #6B7280; /* captions, metadata */
  --color-white:       #FFFFFF; /* card interiors */

  /* ---- Extended forest scale ---------------------------- */
  --forest-50:  #F1F4F2;
  --forest-100: #E8EDE9;
  --forest-200: #C9D5CD;
  --forest-300: #9DB2A4;
  --forest-400: #6A8574;
  --forest-500: #496254;
  --forest-600: #3D5A47;
  --forest-700: #2D4033;
  --forest-800: #233227;
  --forest-900: #18221C;

  /* ---- Extended sage scale ------------------------------ */
  --sage-50:  #F0F4F1;
  --sage-100: #E3EBE5;
  --sage-200: #C9D8CE;
  --sage-300: #B5C9BB;
  --sage-400: #8BA693;
  --sage-500: #6E8B77;
  --sage-600: #57705F;

  /* ---- Extended maple scale ----------------------------- */
  --maple-100: #FBE3E5;
  --maple-300: #EE9298;
  --maple-500: #DC3545;
  --maple-600: #C82333;
  --maple-700: #A71D2A;

  /* ---- Semantic tokens ---------------------------------- */
  --color-interactive:        var(--color-forest);
  --color-interactive-hover:  var(--color-forest-light);
  --color-action:             var(--color-maple);
  --color-action-hover:       var(--color-maple-dark);
  --color-destructive:        var(--color-maple);
  --color-success:            #2F7A52;
  --color-disabled-bg:        var(--color-sage-pale);
  --color-disabled-fg:        var(--color-sage);
  --color-data-positive:      #2F7A52; /* yea / for */
  --color-data-negative:      #C82333; /* nay / against */
  --color-data-neutral:       var(--color-warm-gray); /* abstain */

  /* ---- Typography --------------------------------------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* type scale — size / line-height / tracking */
  --text-display: 3.5rem;   /* 56px */
  --text-h1:      2.5rem;    /* 40px */
  --text-h2:      2rem;      /* 32px */
  --text-h3:      1.5rem;    /* 24px */
  --text-h4:      1.25rem;   /* 20px */
  --text-h5:      1rem;      /* 16px */
  --text-h6:      0.875rem;  /* 14px */
  --text-body-l:  1.125rem;  /* 18px */
  --text-body:    1rem;      /* 16px */
  --text-body-s:  0.875rem;  /* 14px */
  --text-caption: 0.75rem;   /* 12px */
  --text-label:   0.75rem;   /* 12px */

  /* ---- Spacing (4px base) ------------------------------- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;
  --space-5xl:  128px;

  /* ---- Radius ------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* ---- Shadows (forest-tinted, never gray) -------------- */
  --shadow-xs: 0 1px 2px rgba(45, 64, 51, 0.04);
  --shadow-sm: 0 1px 3px rgba(45, 64, 51, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 64, 51, 0.08);
  --shadow-lg: 0 8px 30px rgba(45, 64, 51, 0.10);
  --shadow-xl: 0 20px 50px rgba(45, 64, 51, 0.14);

  /* ---- Focus ring --------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(45, 64, 51, 0.24);

  /* ---- Motion ------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-linear: linear;

  --dur-fast:      100ms;
  --dur-base:      200ms;
  --dur-medium:    350ms;
  --dur-slow:      500ms;
  --dur-very-slow: 700ms;

  /* ---- Layout ------------------------------------------- */
  --bp-xs: 360px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1536px;
}