/**
 * Bangkok GRAD — CSS Design Tokens
 * BG-008: Native HTML/CSS design system
 *
 * All design tokens are defined as CSS custom properties on :root.
 * Do NOT change token values without updating docs/design/BG-008_DESIGN_SYSTEM_AND_PUBLIC_TEMPLATES.md.
 *
 * Naming conventions:
 *   --color-*       Color palette
 *   --font-*        Font stacks
 *   --space-*       Spacing scale (4px base)
 *   --radius-*      Border radius
 *   --shadow-*      Box shadow
 *   --container-*   Max-width breakpoints
 *   --transition-*  Transition durations
 */

:root {
  /* -------------------------------------------------------------------------
   * Colors — base palette
   * Visual direction: deep navy + gold accent (BG-006 §17.1)
   * -------------------------------------------------------------------------*/

  /* Navy / primary brand */
  --color-navy:       #0A1628;   /* primary brand navy */
  --color-navy-dark:  #060e1c;   /* deepest; for dramatic headers */
  --color-navy-mid:   #152238;   /* hover / active states */
  --color-navy-light: #1e3155;   /* lighter navy for nav items etc. */

  /* Gold / accent */
  --color-gold:       #C9A84C;   /* primary gold accent */
  --color-gold-hover: #b8963e;   /* darker gold on hover */
  --color-gold-light: #f5edd4;   /* very light gold tint */
  --color-gold-muted: #e8d59a;   /* lighter gold for decorative borders */

  /* Backgrounds */
  --color-bg:           #ffffff;   /* page background */
  --color-surface:      #f9f8f5;   /* warm off-white surface (cards, sections) */
  --color-surface-alt:  #f2efe9;   /* slightly warmer alt surface */
  --color-surface-navy: #0d1f3c;   /* dark navy surface (hero, CTA sections) */

  /* Text */
  --color-text:           #1a1a2e;   /* primary body text */
  --color-text-secondary: #4a4966;   /* secondary / meta text */
  --color-muted:          #7a7898;   /* muted / placeholder text */
  --color-text-inverse:   #ffffff;   /* text on dark backgrounds */

  /* Borders */
  --color-border:       #e2dfd9;   /* default border */
  --color-border-light: #ebe9e4;   /* subtle border */
  --color-border-gold:  #c9a84c;   /* gold border for featured cards */

  /* Semantic */
  --color-error:   #c0392b;
  --color-success: #27ae60;
  --color-warning: #e67e22;
  --color-info:    #2980b9;

  /* -------------------------------------------------------------------------
   * Typography
   * System font stack with strong Cyrillic coverage (BG-006 §16.3, §17.1)
   * -------------------------------------------------------------------------*/

  /* Sans-serif: Inter (Google Fonts) → Segoe UI → system-ui fallback chain */
  --font-sans:
    'Inter',
    'Segoe UI',
    system-ui,
    -apple-system,
    'Helvetica Neue',
    Arial,
    sans-serif;

  /* Serif: for occasional editorial use */
  --font-serif:
    Georgia,
    'Times New Roman',
    serif;

  /* Monospace: for code or data snippets */
  --font-mono:
    'JetBrains Mono',
    'Fira Code',
    'Courier New',
    monospace;

  /* -------------------------------------------------------------------------
   * Spacing scale (4px base × multipliers)
   * Use named tokens; avoid raw px/rem values in components.
   * -------------------------------------------------------------------------*/
  --space-0:  0;
  --space-1:  0.25rem;    /* 4px */
  --space-2:  0.5rem;     /* 8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-7:  2rem;       /* 32px */
  --space-8:  2.5rem;     /* 40px */
  --space-9:  3rem;       /* 48px */
  --space-10: 4rem;       /* 64px */
  --space-11: 5rem;       /* 80px */
  --space-12: 6rem;       /* 96px */

  /* -------------------------------------------------------------------------
   * Border radius
   * -------------------------------------------------------------------------*/
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* -------------------------------------------------------------------------
   * Shadows
   * -------------------------------------------------------------------------*/
  --shadow-sm:        0 1px 4px rgba(10, 22, 40, 0.07);
  --shadow-card:      0 2px 12px rgba(10, 22, 40, 0.09);
  --shadow-card-hover: 0 6px 24px rgba(10, 22, 40, 0.15);
  --shadow-modal:     0 16px 48px rgba(10, 22, 40, 0.24);

  /* -------------------------------------------------------------------------
   * Container widths (max-width)
   * -------------------------------------------------------------------------*/
  --container-xs: 480px;    /* mobile-only narrow */
  --container-sm: 640px;    /* small content block */
  --container-md: 768px;    /* article / reading column */
  --container-lg: 1024px;   /* tablet+ layout */
  --container-xl: 1280px;   /* standard desktop */
  --container-2xl: 1440px;  /* wide desktop */

  /* -------------------------------------------------------------------------
   * Transitions
   * -------------------------------------------------------------------------*/
  --transition-fast:   0.12s ease;
  --transition-base:   0.22s ease;
  --transition-slow:   0.4s ease;

  /* -------------------------------------------------------------------------
   * Z-index scale
   * -------------------------------------------------------------------------*/
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}