:root {
    --charcoal:      #0b0a08;     --charcoal-deep: #060605;     --charcoal-soft: #0f0e0c;     --cream:         #C8B99A;
  --cream-light:   #E2D4B5;
  --cream-dim:     #9E8F78;
  --red:           #A7321E;
  --red-bright:    #C64226;
  --ivory:         #F6F0E6;     --shell:         #EDE3D3;     --cobalt:        #1F3A8F;     --tomato:        #C8392B;     --lemon:         #E8B93A;     --earth-muted:   #5B4E3E;   
    --surface:        var(--ivory);
  --surface-alt:    var(--shell);
  --surface-dark:   var(--charcoal);
  --text:           var(--charcoal);
  --text-muted:     var(--earth-muted);
  --text-on-dark:   var(--cream-light);
  --muted-on-dark:  var(--cream-dim);
  --line:           rgba(11,10,8,0.14);
  --line-strong:    rgba(11,10,8,0.28);
  --line-on-dark:   rgba(200,185,154,0.16);
  --accent:         var(--red);            --accent-on-dark: var(--red-bright);
  --focus:          var(--cobalt);
  --focus-on-dark:  var(--lemon);

    --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow Condensed', 'Arial Narrow', sans-serif;

    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px; --sp-5: 32px;
  --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;

    --max-width: 1440px;
  --gutter: 16px;
  --radius: 2px;
  --header-h: 68px;

    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.7s;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }

[data-line="men"]   { --accent: var(--red); }
[data-line="women"] { --accent: var(--cobalt); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001s; --dur-base: 0.001s; --dur-slow: 0.001s; }
}