/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ────────────────────────────────────────────────────────────────
   Layer 1  Palette   Raw named values. Swap these to change the
                      colour scheme entirely.
   Layer 2  Semantic  Map palette names to roles. Swap these to
                      remap which palette colour plays which role.
   ════════════════════════════════════════════════════════════════ */


/* ── Layer 1: Palette ───────────────────────────────────────────── */
:root {
  /* Warm-stone neutrals */
  --color-stone-950: #1C1917;
  --color-stone-700: #44403C;
  --color-stone-500: #78716C;
  --color-stone-400: #A8A29E;
  --color-stone-300: #C4B5A5;
  --color-stone-200: #E7E5E0;
  --color-stone-100: #F5F4F0;
  --color-stone-50:  #FAF9F6;
  --color-stone-25:  #FDFCF9;

  /* Brand orange (Hardy Remagen primary) */
  --color-orange-800: #B45309;
  --color-orange-700: #D97706;
  --color-orange-600: #F59E0B;
  --color-orange-100: #FDE68A;
  --color-orange-50:  #FFFBEB;

  /* Brand green (Hardy Remagen secondary) */
  --color-green-900: #14532D;
  --color-green-800: #166534;
  --color-green-700: #15803D;
  --color-green-50:  #F0FDF4;
  --color-green-200: #BBF7D0;

  /* Status reds (error) */
  --color-red-50:  #FEF2F2;
  --color-red-200: #FECACA;
  --color-red-800: #991B1B;
}


/* ── Layer 2: Semantic tokens ───────────────────────────────────── */
:root {
  /* Typography
     Swap font-families here. fonts.css must supply the @font-face
     declarations for any custom fonts you reference. */
  --font-brand:   'Bebas Neue', sans-serif;
  --font-heading: 'Lora', serif;
  --font-ui:      'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Text hierarchy */
  --ink:      var(--color-stone-950);  /* primary body text */
  --ink-soft: var(--color-stone-700);  /* secondary text, table cells */
  --muted:    var(--color-stone-500);  /* hints, placeholders, labels */

  /* Surfaces */
  --ground:        var(--color-stone-50);   /* page background */
  --surface:       #fff;                    /* card / input background */
  --surface-hover: var(--color-stone-25);   /* table row hover */

  /* Borders */
  --rule:       var(--color-stone-200);  /* default dividers & borders */
  --rule-focus: var(--color-stone-300);  /* hovered / stronger borders */

  /* Brand accent — orange primary, green nav */
  --accent:        var(--color-orange-700);  /* primary action colour */
  --accent-dim:    var(--color-orange-50);   /* tinted backgrounds */
  --accent-hover:  var(--color-orange-800);  /* hover / pressed state */
  --accent-border: var(--color-orange-100);  /* chip / tag borders */

  /* Navigation — dark green brand bar */
  --nav-bg:    var(--color-green-900);
  --nav-text:  #ffffff;
  --nav-muted: var(--color-green-200);

  /* Overlay */
  --overlay-bg: rgba(28, 25, 23, 0.55);  /* modal backdrop */

  /* Status colours */
  --success-bg:     var(--color-green-50);
  --success-border: var(--color-green-200);
  --success-text:   var(--color-green-800);

  --error-bg:     var(--color-red-50);
  --error-border: var(--color-red-200);
  --error-text:   var(--color-red-800);

  --info-bg:     var(--accent-dim);
  --info-border: var(--accent-border);
  --info-text:   var(--accent-hover);

  /* Sizing */
  --nav-h: 46px;  /* sticky nav height — also controls sticky table header offset */
}