/* Trojan Storage Design System — raw tokens as CSS custom properties.
   Source of truth: design handoff (design_handoff_choose_your_space_modal/tokens/*).
   Enqueued globally so design-handoff component CSS (--brand, --radius-md, etc.)
   works verbatim. theme.json mirrors the editor-facing subset of these into
   WordPress global styles. Fonts are loaded via functions.php (NOT @import here,
   to avoid a render-blocking import). */

:root {
  /* ---- Primary: Trojan Red (brand #D32D08, sampled from the logo) ---- */
  --red-50:  #FEF3F0;
  --red-100: #FCDFD7;
  --red-200: #F8BDAD;
  --red-300: #F19177;
  --red-400: #E66440;
  --red-500: #D32D08; /* brand */
  --red-600: #B82506;
  --red-700: #951D06;
  --red-800: #75180A;
  --red-900: #5C150B;

  /* ---- Neutral: Slate ---- */
  --white:    #FFFFFF;
  --slate-50:  #F6F7F9;
  --slate-100: #EDEFF3;
  --slate-200: #DCE0E7;
  --slate-300: #C0C6D1;
  --slate-400: #99A1AF;
  --slate-500: #6B7383;
  --slate-600: #4B525F;
  --slate-700: #353A44;
  --slate-800: #22262E;
  --slate-900: #14161B;
  --ink:       #0D0F13;

  /* ---- Semantic accents ---- */
  --green-50:  #E8F6EF;
  --green-500: #1E8A5B;
  --green-600: #14704A;
  --amber-50:  #FDF4E1;
  --amber-500: #E2A100;
  --amber-600: #B47F00;
  --blue-50:   #E9F1FC;
  --blue-500:  #1E6FD0;
  --blue-600:  #1659AB;
  --danger-50: #FBEAE9;
  --danger-500:#C8201A;
  --danger-600:#A11713;

  /* ---- Semantic aliases ---- */
  --brand:            var(--red-500);
  --brand-hover:      var(--red-600);
  --brand-active:     var(--red-700);
  --brand-subtle:     var(--red-50);
  --on-brand:         var(--white);

  --bg-page:          var(--slate-50);
  --bg-page-alt:      var(--white);
  --surface-card:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--slate-100);
  --surface-inverse:  var(--slate-900);

  --text-strong:      var(--ink);
  --text-body:        var(--slate-700);
  --text-muted:       var(--slate-500);
  --text-faint:       var(--slate-400);
  --text-on-inverse:  var(--white);
  --text-on-inverse-muted: var(--slate-300);
  --text-link:        var(--red-600);

  --border-subtle:    var(--slate-200);
  --border-default:   var(--slate-300);
  --border-strong:    var(--slate-400);

  --success:          var(--green-500);
  --success-bg:       var(--green-50);
  --warning:          var(--amber-500);
  --warning-bg:       var(--amber-50);
  --info:             var(--blue-500);
  --info-bg:          var(--blue-50);
  --danger:           var(--danger-500);
  --danger-bg:        var(--danger-50);

  --focus-ring:       color-mix(in srgb, var(--red-500) 45%, transparent);

  /* ---- Typography ---- */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-sans:    'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --fs-2xs:  0.75rem;   /* 12 */
  --fs-xs:   0.8125rem; /* 13 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  3.75rem;   /* 60 */
  --fs-5xl:  4.75rem;   /* 76 */

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;

  --text-display:   var(--fw-extra) var(--fs-5xl)/var(--lh-tight) var(--font-display);
  --text-h1:        var(--fw-bold) var(--fs-3xl)/var(--lh-snug) var(--font-display);
  --text-h2:        var(--fw-bold) var(--fs-2xl)/var(--lh-snug) var(--font-display);
  --text-h3:        var(--fw-semibold) var(--fs-xl)/var(--lh-snug) var(--font-display);
  --text-eyebrow:   var(--fw-bold) var(--fs-sm)/var(--lh-normal) var(--font-sans);
  --text-lead:      var(--fw-regular) var(--fs-md)/var(--lh-relaxed) var(--font-sans);
  --text-body-role: var(--fw-regular) var(--fs-base)/var(--lh-normal) var(--font-sans);
  --text-small:     var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-sans);

  /* ---- Spacing & layout (base 4px) ---- */
  --space-0:   0;
  --space-1:   0.25rem; /* 4  */
  --space-2:   0.5rem;  /* 8  */
  --space-3:   0.75rem; /* 12 */
  --space-4:   1rem;    /* 16 */
  --space-5:   1.5rem;  /* 24 */
  --space-6:   2rem;    /* 32 */
  --space-7:   2.5rem;  /* 40 */
  --space-8:   3rem;    /* 48 */
  --space-9:   4rem;    /* 64 */
  --space-10:  5rem;    /* 80 */
  --space-12:  6rem;    /* 96 */
  --space-16:  8rem;    /* 128 */

  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1100px;
  --container-xl:  1280px;
  --gutter:        var(--space-5);
  --section-y:     var(--space-12);

  /* ---- Radius, border & shadow ---- */
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  --border-hair:   1px;
  --border-thick:  2px;
  --border-accent: 4px; /* signature red top/left rule */

  --shadow-xs: 0 1px 2px rgba(20, 22, 27, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 22, 27, 0.08), 0 1px 2px rgba(20, 22, 27, 0.06);
  --shadow-md: 0 4px 10px rgba(20, 22, 27, 0.08), 0 2px 4px rgba(20, 22, 27, 0.06);
  --shadow-lg: 0 12px 28px rgba(20, 22, 27, 0.12), 0 4px 8px rgba(20, 22, 27, 0.06);
  --shadow-xl: 0 24px 56px rgba(20, 22, 27, 0.16);
  --shadow-brand: 0 8px 20px rgba(211, 45, 8, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}