/* ==========================================================================
   DESIGN TOKENS - PALETTE 2: CHARCOAL NEUTRAL & HIGH-CONTRAST AMBER
   Domain: 888jili-win.com | Brand: 888jili | Target: Philippines (en-PH)
   Archetype 0: 4px Pill / Geometric Borders (Space Grotesk + Inter)
   ========================================================================== */

:root {
  /* 1-5: Base Surface & Background Tokens */
  --color-bg-base: oklch(13% 0.005 60);              /* Deep Charcoal base (#1a1816) */
  --color-bg-surface: oklch(17% 0.008 60);           /* Elevated charcoal surface (#24211e) */
  --color-bg-elevated: oklch(21% 0.012 60);          /* Container & card surface (#2f2b26) */
  --color-bg-overlay: oklch(13% 0.005 60 / 0.90);    /* Modal & drawer backdrop */
  --color-bg-accent-soft: oklch(25% 0.03 65);        /* Warm amber-tinted container */

  /* 6-10: Brand Primary & Metallic Accent Tokens */
  --color-primary: oklch(75% 0.17 65);               /* Radiant Amber primary (#f59e0b) */
  --color-primary-hover: oklch(80% 0.18 68);         /* Bright golden amber hover */
  --color-primary-active: oklch(68% 0.16 62);        /* Deep amber active state */
  --color-accent-bronze: oklch(60% 0.12 45);         /* Bronze metallic accent (#b45309) */
  --color-accent-amber: oklch(75% 0.17 65);          /* Amber highlight */
  --color-accent-gold: oklch(82% 0.15 85);           /* Warm champagne gold */

  /* 11-15: Typography Colors */
  --color-text-main: oklch(96% 0.008 65);            /* Crisp high-contrast cream white */
  --color-text-muted: oklch(76% 0.015 65);           /* Secondary readable prose */
  --color-text-subtle: oklch(58% 0.012 60);          /* Tertiary metadata & labels */
  --color-text-inverse: oklch(12% 0.005 60);         /* Dark charcoal for bright pill buttons */
  --color-text-amber: oklch(78% 0.16 65);            /* High-contrast amber accent text */

  /* 16-18: Status & Functional Colors */
  --color-success: oklch(72% 0.16 142);              /* Philippine e-wallet green (GCash) */
  --color-danger: oklch(65% 0.21 28);                /* Error & alert red */
  --color-info: oklch(74% 0.13 215);                 /* Regulatory & notice cyan */

  /* 19-21: Border & Geometry (Archetype 0: 4px pill/geometric) */
  --border-radius-sm: 4px;
  --border-radius-base: 4px;                         /* Strict 4px pill/geometric archetype */
  --border-radius-lg: 8px;
  --border-radius-pill: 9999px;

  /* 22-23: Borders & Dividers */
  --border-hairline: 1px solid oklch(26% 0.01 60);
  --border-amber: 1px solid oklch(48% 0.09 65);

  /* 24-25: Typography Font Stacks (Space Grotesk + Inter) */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* 26-27: Elevations & Shadows */
  --shadow-subtle: 0 2px 10px oklch(7% 0.01 60 / 0.5);
  --shadow-elevated: 0 10px 28px oklch(6% 0.01 60 / 0.7);
}