/*
 * 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 {

  /* ===== Backgrounds ===== */
  --color-bg-page:    #17191c;
  --color-bg-surface: #1f2227;
  --color-bg-raised:  #272b32;
  --color-bg-code:    #131518;

  /* ===== Borders ===== */
  --color-border:        #30353e;
  --color-border-subtle: #242830;
  --color-border-focus:  #c9a84c;

  /* ===== Gold accent ===== */
  --color-gold:              #c9a84c;
  --color-gold-hover:        #dbb85a;
  --color-gold-muted:        #a8893e;
  --color-gold-subtle:       rgba(201, 168, 76, 0.12);
  --color-gold-subtle-hover: rgba(201, 168, 76, 0.20);

  /* ===== Text ===== */
  --color-text-primary:   #edeae2;
  --color-text-secondary: #8c9199;
  --color-text-muted:     #5c636f;
  --color-text-on-gold:   #17191c;
  --color-text-link:      #c9a84c;
  --color-text-link-hover: #dbb85a;

  /* ===== Status ===== */
  --color-status-in-dev:          #4a8fcf;
  --color-status-in-dev-bg:       rgba(74, 143, 207, 0.12);
  --color-status-in-dev-border:   rgba(74, 143, 207, 0.25);

  --color-status-planned:         #9b7fd4;
  --color-status-planned-bg:      rgba(155, 127, 212, 0.12);
  --color-status-planned-border:  rgba(155, 127, 212, 0.25);

  --color-status-tbd:             #636b78;
  --color-status-tbd-bg:          rgba(99, 107, 120, 0.15);
  --color-status-tbd-border:      rgba(99, 107, 120, 0.25);

  --color-status-implemented:         #4caf82;
  --color-status-implemented-bg:      rgba(76, 175, 130, 0.12);
  --color-status-implemented-border:  rgba(76, 175, 130, 0.25);

  --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:              #5e9b8a;
  --color-status-live-bg:           rgba(94, 155, 138, 0.14);
  --color-status-live-border:       rgba(94, 155, 138, 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:      #6d89b8;
  --color-status-future-major-bg:   rgba(109, 137, 184, 0.14);
  --color-status-future-major-border: rgba(109, 137, 184, 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: #8d93a1;
  --color-status-requires-confirmation-bg: rgba(141, 147, 161, 0.15);
  --color-status-requires-confirmation-border: rgba(141, 147, 161, 0.3);

  --color-status-under-consideration: #8b7ca9;
  --color-status-under-consideration-bg: rgba(139, 124, 169, 0.15);
  --color-status-under-consideration-border: rgba(139, 124, 169, 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: #7f8896;
  --color-status-requires-research-bg: rgba(127, 136, 150, 0.15);
  --color-status-requires-research-border: rgba(127, 136, 150, 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:        #6e7481;
  --color-status-superseded-bg:     rgba(110, 116, 129, 0.16);
  --color-status-superseded-border: rgba(110, 116, 129, 0.3);

  --color-category-game:            #c9a84c;
  --color-category-game-bg:         rgba(201, 168, 76, 0.14);
  --color-category-game-border:     rgba(201, 168, 76, 0.3);

  --color-category-product:         #78a39b;
  --color-category-product-bg:      rgba(120, 163, 155, 0.14);
  --color-category-product-border:  rgba(120, 163, 155, 0.3);

  --color-risk-low:                 #5d977a;
  --color-risk-low-bg:              rgba(93, 151, 122, 0.14);
  --color-risk-low-border:          rgba(93, 151, 122, 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;
}