/*
 * assets/css/tokens.css
 * Shared site design tokens.
 *
 * All CSS custom properties are defined here.
 * Never scatter raw color values, spacing values, or font sizes
 * directly into other CSS files - reference these tokens instead.
 */

:root {

  /* ===== Palette channels ===== */
  --color-gold-rgb: 198, 152, 63;
  --color-overlay-1: rgba(255, 255, 255, 0.01);
  --color-overlay-2: rgba(255, 255, 255, 0.02);
  --color-overlay-3: rgba(255, 255, 255, 0.03);
  --color-overlay-4: rgba(255, 255, 255, 0.04);

  /* ===== Backgrounds ===== */
  --color-bg-page:    #070708;
  --color-bg-surface: #0b0b0d;
  --color-bg-raised:  #121214;
  --color-bg-code:    #050506;

  /* ===== Borders ===== */
  --color-border:        #3a3429;
  --color-border-subtle: #26221b;
  --color-border-focus:  #c6983f;

  /* ===== Gold accent ===== */
  --color-gold:              #c6983f;
  --color-gold-hover:        #ddb35a;
  --color-gold-muted:        #977737;
  --color-gold-subtle:       rgba(var(--color-gold-rgb), 0.12);
  --color-gold-subtle-hover: rgba(var(--color-gold-rgb), 0.20);

  /* ===== Text ===== */
  --color-text-primary:   #f1e9d8;
  --color-text-secondary: #b8b09f;
  --color-text-muted:     #857d6f;
  --color-text-on-gold:   #14171c;
  --color-text-link:      #cfa34b;
  --color-text-link-hover: #e1b861;

  /* ===== Status ===== */
  --color-status-in-dev:          #b79246;
  --color-status-in-dev-bg:       rgba(198, 152, 63, 0.12);
  --color-status-in-dev-border:   rgba(198, 152, 63, 0.28);

  --color-status-planned:         #a9823f;
  --color-status-planned-bg:      rgba(169, 130, 63, 0.12);
  --color-status-planned-border:  rgba(169, 130, 63, 0.28);

  --color-status-tbd:             #7f7769;
  --color-status-tbd-bg:          rgba(127, 119, 105, 0.15);
  --color-status-tbd-border:      rgba(127, 119, 105, 0.28);

  --color-status-implemented:         #b99852;
  --color-status-implemented-bg:      rgba(185, 152, 82, 0.12);
  --color-status-implemented-border:  rgba(185, 152, 82, 0.28);

  --color-status-deprecated:        #c0705a;
  --color-status-deprecated-bg:     rgba(192, 112, 90, 0.12);
  --color-status-deprecated-border: rgba(192, 112, 90, 0.25);

  --color-status-live:              #b89a5e;
  --color-status-live-bg:           rgba(184, 154, 94, 0.14);
  --color-status-live-border:       rgba(184, 154, 94, 0.3);

  --color-status-concept:           #b28f58;
  --color-status-concept-bg:        rgba(178, 143, 88, 0.14);
  --color-status-concept-border:    rgba(178, 143, 88, 0.32);

  --color-status-future-major:      #a8874f;
  --color-status-future-major-bg:   rgba(168, 135, 79, 0.14);
  --color-status-future-major-border: rgba(168, 135, 79, 0.3);

  --color-status-future-flagship:   #b96b52;
  --color-status-future-flagship-bg: rgba(185, 107, 82, 0.16);
  --color-status-future-flagship-border: rgba(185, 107, 82, 0.3);

  --color-status-requires-confirmation: #8f8475;
  --color-status-requires-confirmation-bg: rgba(143, 132, 117, 0.15);
  --color-status-requires-confirmation-border: rgba(143, 132, 117, 0.3);

  --color-status-under-consideration: #9e8150;
  --color-status-under-consideration-bg: rgba(158, 129, 80, 0.15);
  --color-status-under-consideration-border: rgba(158, 129, 80, 0.3);

  --color-status-needs-clarification: #c38a52;
  --color-status-needs-clarification-bg: rgba(195, 138, 82, 0.15);
  --color-status-needs-clarification-border: rgba(195, 138, 82, 0.32);

  --color-status-requires-research: #8a8072;
  --color-status-requires-research-bg: rgba(138, 128, 114, 0.15);
  --color-status-requires-research-border: rgba(138, 128, 114, 0.3);

  --color-status-deferred:          #7a6a58;
  --color-status-deferred-bg:       rgba(122, 106, 88, 0.15);
  --color-status-deferred-border:   rgba(122, 106, 88, 0.3);

  --color-status-superseded:        #726b5f;
  --color-status-superseded-bg:     rgba(114, 107, 95, 0.16);
  --color-status-superseded-border: rgba(114, 107, 95, 0.3);

  --color-category-game:            #c6983f;
  --color-category-game-bg:         rgba(var(--color-gold-rgb), 0.14);
  --color-category-game-border:     rgba(var(--color-gold-rgb), 0.3);

  --color-category-product:         #b79a63;
  --color-category-product-bg:      rgba(183, 154, 99, 0.14);
  --color-category-product-border:  rgba(183, 154, 99, 0.3);

  --color-risk-low:                 #a48e58;
  --color-risk-low-bg:              rgba(164, 142, 88, 0.14);
  --color-risk-low-border:          rgba(164, 142, 88, 0.3);

  --color-risk-moderate:            #ad9556;
  --color-risk-moderate-bg:         rgba(173, 149, 86, 0.15);
  --color-risk-moderate-border:     rgba(173, 149, 86, 0.32);

  --color-risk-high:                #be7a58;
  --color-risk-high-bg:             rgba(190, 122, 88, 0.16);
  --color-risk-high-border:         rgba(190, 122, 88, 0.3);

  --color-risk-critical:            #c15e58;
  --color-risk-critical-bg:         rgba(193, 94, 88, 0.18);
  --color-risk-critical-border:     rgba(193, 94, 88, 0.34);

  /* ===== Spacing scale ===== */
  --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-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ===== Border radius ===== */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 9999px;

  /* ===== Shadows ===== */
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.60);
  --shadow-card:      0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.60);

  /* ===== Typography - families ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Cascadia Code', 'JetBrains Mono', 'Fira Code',
               ui-monospace, 'Courier New', monospace;

  /* ===== Typography - sizes ===== */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  /* ===== Typography - leading, weight, tracking ===== */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.15em;

  /* ===== Layout ===== */
  --content-width-sm:  640px;
  --content-width-md:  768px;
  --content-width-lg:  1024px;
  --content-width-xl:  1200px;
  --content-width-max: 1400px;

  --nav-height: 60px;
}