:root {

  --dd-red-900: #2b0906;
  --dd-red-800: #4a100b;
  --dd-red-700: #661711;
  --dd-red-600: #8a2018;
  --dd-red-500: #a82a1f;
  --dd-red-400: #c23c2c;
  --dd-red-300: #d96a58;
  --dd-red-200: #eba695;
  --dd-red-100: #f7ddd5;

  --dd-blue-900: #070f16;
  --dd-blue-800: #0e1c27;
  --dd-blue-700: #152b3a;
  --dd-blue-600: #1d3c50;
  --dd-blue-500: #2a5570;
  --dd-blue-400: #3c7593;
  --dd-blue-300: #6ba0bd;
  --dd-blue-200: #a5c8dc;
  --dd-blue-100: #dbe9f1;

  --dd-gold-900: #3d2f0a;
  --dd-gold-800: #5c4610;
  --dd-gold-700: #82631a;
  --dd-gold-600: #a37c22;
  --dd-gold-500: #c19a2e;
  --dd-gold-400: #d9b653;
  --dd-gold-300: #e8d093;
  --dd-gold-200: #f2e6c4;

  --dd-rust-800: #3a1d0e;
  --dd-rust-700: #5a2e16;
  --dd-rust-600: #7d4426;
  --dd-rust-500: #9c5b34;
  --dd-rust-400: #b87a4f;

  --dd-parch-600: #a8926c;
  --dd-parch-500: #c2ab84;
  --dd-parch-400: #d6c4a0;
  --dd-parch-300: #e3d5b8;
  --dd-parch-200: #eee3cd;
  --dd-parch-100: #f6efe0;

  --dd-iron-990: #070604;
  --dd-iron-980: #0b0907;
  --dd-iron-950: #110e0b;
  --dd-iron-900: #171310;
  --dd-iron-850: #1e1916;
  --dd-iron-800: #26201c;
  --dd-iron-700: #362e28;
  --dd-iron-600: #4a4038;
  --dd-iron-500: #6b5f54;
  --dd-iron-400: #93867a;
  --dd-iron-300: #b9ada1;
  --dd-iron-200: #d8cfc5;
  --dd-iron-100: #ece6de;
  --dd-white:    #ffffff;

  --dd-green-600: #3f6b3a;
  --dd-amber-600: #b07817;

  --c-brand-red:        var(--dd-red-600);
  --c-brand-blue:       var(--dd-blue-600);
  --c-brand-gold:       var(--dd-gold-500);
  --c-brand-rust:       var(--dd-rust-600);
  --c-brand-parchment:  var(--dd-parch-300);

  --c-team-dragoons:    var(--dd-red-500);
  --c-team-lancers:     var(--dd-blue-400);

  --c-surface-base:     var(--dd-iron-980);
  --c-surface-raised:   var(--dd-iron-900);
  --c-surface-overlay:  var(--dd-iron-850);
  --c-surface-sunken:   var(--dd-iron-990);
  --c-surface-plate:    var(--dd-iron-800);
  --c-surface-invert:   var(--dd-parch-200);

  --c-text-primary:     var(--dd-parch-100);
  --c-text-secondary:   var(--dd-iron-200);
  --c-text-muted:       var(--dd-iron-300);
  --c-text-accent:      var(--dd-gold-400);
  --c-text-on-invert:   var(--dd-iron-900);
  --c-text-on-brand:    var(--dd-parch-100);

  --c-border-subtle:    rgba(193, 154, 46, 0.14);
  --c-border-default:   rgba(193, 154, 46, 0.26);
  --c-border-strong:    rgba(193, 154, 46, 0.46);
  --c-border-gold:      var(--dd-gold-700);
  --c-border-iron:      var(--dd-iron-700);
  --c-border-blood:     var(--dd-red-700);

  --c-action:           var(--dd-red-600);
  --c-action-hover:     var(--dd-red-500);
  --c-action-text:      var(--dd-parch-100);
  --c-link:             var(--dd-gold-400);
  --c-link-hover:       var(--dd-gold-300);
  --c-focus-ring:       var(--dd-gold-400);

  --c-status-upcoming:  var(--dd-gold-500);
  --c-status-past:      var(--dd-iron-600);
  --c-status-live:      var(--dd-red-400);
  --c-status-ok:        var(--dd-green-600);

  --font-display:  "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-heraldic: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body:     "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-stencil:  "Oswald", "Arial Narrow", sans-serif;
  --font-mono:     ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --fs-3xs:  0.875rem;
  --fs-2xs:  0.9375rem;
  --fs-xs:   1rem;
  --fs-sm:   1.0625rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.1875rem, 1.10rem + 0.36vw, 1.375rem);
  --fs-xl:   clamp(1.3125rem, 1.19rem + 0.52vw, 1.625rem);
  --fs-2xl:  clamp(1.625rem,  1.38rem + 1.04vw, 2.25rem);
  --fs-3xl:  clamp(2.125rem,  1.65rem + 2.00vw, 3.5rem);
  --fs-4xl:  clamp(2.75rem,   1.90rem + 3.60vw, 5rem);
  --fs-5xl:  clamp(3.25rem,   1.60rem + 7.00vw, 8rem);

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  --lh-crush:     0.86;
  --lh-tight:     1.02;
  --lh-snug:      1.22;
  --lh-normal:    1.6;
  --lh-relaxed:   1.75;

  --ls-crush:    -0.04em;
  --ls-tightest: -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.08em;
  --ls-wider:     0.16em;
  --ls-widest:    0.22em;

  --sp-0:    0;
  --sp-1:    0.25rem;
  --sp-2:    0.5rem;
  --sp-3:    0.75rem;
  --sp-4:    1rem;
  --sp-5:    1.5rem;
  --sp-6:    2rem;
  --sp-7:    2.5rem;
  --sp-8:    3rem;
  --sp-9:    4rem;
  --sp-10:   5rem;
  --sp-11:   6.5rem;
  --sp-12:   8rem;

  --sp-section: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);

  --layout-max:        1280px;
  --layout-max-wide:   1560px;
  --layout-max-text:   64ch;
  --layout-gutter:     clamp(1.25rem, 0.6rem + 2.4vw, 3rem);
  --layout-header-h:   4.25rem;

  --radius-none: 0;
  --radius-sm:   1px;
  --radius-md:   2px;
  --radius-lg:   2px;
  --radius-xl:   3px;
  --radius-pill: 0;

  --bw-hair:  1px;
  --bw-thin:  2px;
  --bw-thick: 3px;
  --bw-slab:  5px;

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-md:   0 6px 18px rgba(0, 0, 0, 0.62);
  --shadow-lg:   0 18px 44px rgba(0, 0, 0, 0.7);

  --bi-green:     #19673f;
  --bi-burgundy:  #851727;
  --mcusa-blue:   #2000ad;
  --mcusa-red:    #ad0500;
  --lsca-navy:    #061b31;
  --lsca-maroon:  #721518;

  --frame-width: 5px;
  --frame-gradient: linear-gradient(135deg,
    var(--dd-red-500) 0%, var(--dd-red-700) 22%, var(--dd-iron-800) 45%,
    var(--dd-iron-800) 55%, var(--dd-blue-600) 78%, var(--dd-blue-400) 100%);
  --frame-glow:
    -0.6rem -0.6rem 1.6rem -0.8rem color-mix(in srgb, var(--dd-red-500) 75%, transparent),
    0.6rem 0.6rem 1.6rem -0.8rem color-mix(in srgb, var(--dd-blue-400) 75%, transparent),
    var(--shadow-lg);

  --mythics-gradient: linear-gradient(120deg,
    var(--dd-red-800) 0%, var(--dd-red-900) 38%, var(--dd-iron-950) 62%,
    color-mix(in srgb, var(--dd-gold-800) 55%, var(--dd-iron-950)) 100%);
  --shadow-xl:   0 30px 80px rgba(0, 0, 0, 0.78);
  --shadow-inset: inset 0 1px 0 rgba(242, 230, 196, 0.06),
                  inset 0 -2px 6px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 0 1px var(--c-border-gold), 0 8px 26px rgba(0, 0, 0, 0.6);

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  --ease-out:    cubic-bezier(0.16, 0.84, 0.28, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);

  --z-under:   0;
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-drawer:  300;
  --z-modal:   400;
  --z-toast:   500;
  --z-grain:   600;

  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");

  --tex-patina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23p)' opacity='0.55'/%3E%3C/svg%3E");

  --tex-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");

  --tex-brushed: repeating-linear-gradient(
    92deg,
    rgba(255, 255, 255, 0.022) 0 1px,
    transparent 1px 3px,
    rgba(0, 0, 0, 0.05) 3px 4px,
    transparent 4px 9px
  );

  --tex-hatch: repeating-linear-gradient(
    45deg,
    rgba(193, 154, 46, 0.05) 0 1px,
    transparent 1px 6px
  );

  --tex-grain-opacity:  0.10;
  --tex-patina-opacity: 0.12;
}

:root[data-theme="parchment"] {
  --c-surface-base:    var(--dd-parch-200);
  --c-surface-raised:  var(--dd-parch-100);
  --c-surface-overlay: var(--dd-parch-300);
  --c-surface-sunken:  var(--dd-parch-400);
  --c-surface-plate:   var(--dd-parch-300);
  --c-surface-invert:  var(--dd-iron-900);

  --c-text-primary:    var(--dd-iron-950);
  --c-text-secondary:  var(--dd-iron-700);
  --c-text-muted:      var(--dd-iron-500);
  --c-text-accent:     var(--dd-gold-800);
  --c-text-on-invert:  var(--dd-parch-100);

  --c-border-subtle:   rgba(23, 19, 16, 0.16);
  --c-border-default:  rgba(23, 19, 16, 0.3);
  --c-border-strong:   rgba(23, 19, 16, 0.5);
  --c-border-iron:     var(--dd-iron-400);

  --c-link:            var(--dd-red-700);
  --c-link-hover:      var(--dd-red-600);

  --shadow-sm: 0 1px 3px rgba(35, 27, 20, 0.18);
  --shadow-md: 0 6px 18px rgba(35, 27, 20, 0.2);
  --shadow-lg: 0 18px 44px rgba(35, 27, 20, 0.24);
  --shadow-xl: 0 30px 80px rgba(35, 27, 20, 0.28);

  --tex-grain-opacity:  0.3;
  --tex-patina-opacity: 0.26;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
  }
}