/**
 * css/variables.css — Single source of truth for all design tokens.
 *
 * Load this FIRST before any other stylesheet.
 * All component CSS files should reference var(--token-name) instead of
 * hardcoding hex values.
 */

:root {
  /* ── Brand colors ─────────────────────────────────────────── */
  --color-navy:       #1a1a3e;   /* dark header backgrounds, table headers  */
  --color-gold:       #fdbb30;   /* primary accent, buttons, selection highlight */
  --color-purple:     #6666ff;   /* link accent, download links             */
  --color-crimson:    #9a2732;   /* emphasis, error states, file icons      */
  --color-green:      #73ad21;   /* success states                          */

  /* ── Neutral palette ──────────────────────────────────────── */
  --color-dark:       #141313;   /* near-black body text                    */
  --color-dark-gray:  #444444;   /* navbar background                       */
  --color-mid-gray:   #888888;   /* muted text, sub-labels                  */
  --color-light-gray: #f8f6ff;   /* table alternate rows, card backgrounds  */
  --color-border:     #e8e6f0;   /* table borders, dividers                 */
  --color-white:      #ffffff;
  --color-bg:         #fafafa;   /* page background                         */

  /* ── Semantic aliases (use these in components) ───────────── */
  --color-primary:    var(--color-gold);
  --color-secondary:  var(--color-navy);
  --color-link:       var(--color-purple);
  --color-danger:     var(--color-crimson);
  --color-success:    var(--color-green);
  --color-text:       var(--color-dark);
  --color-text-muted: var(--color-mid-gray);

  /* ── Typography ───────────────────────────────────────────── */
  --font-heading:  'Oswald', sans-serif;
  --font-body:     'Rubik', 'Abel', sans-serif;
  --font-size-base: 1rem;
  --line-height:    1.6;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-xxl: 60px;

  /* ── Border radius ────────────────────────────────────────── */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg: 12px;
  --radius-pill: 50px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px  rgba(0,0,0,.08);
  --shadow-card: 0 2px 12px rgba(0,0,0,.12);
  --shadow-lg:   0 4px 24px rgba(0,0,0,.16);

  /* ── Transitions ──────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}