/* Swenor's Weiners — design tokens as CSS custom properties.
   Source of truth is tokens/tokens.json; this file is the runtime mirror.
   Light (paper) is the default. Dark (firehouse-at-night) swaps grounds, keeps red hot. */

:root {
  /* ---- palette ---- */
  --sw-paper-50:  #FAF5E9;
  --sw-paper-100: #F4ECDA;
  --sw-paper-200: #EDE3CE;
  --sw-paper-300: #E0D3B8;
  --sw-paper-400: #C9B896;

  --sw-ink-900: #141311;
  --sw-ink-800: #1C1B19;
  --sw-ink-700: #2E2B27;
  --sw-ink-600: #46413A;
  --sw-ink-500: #6B6459;

  --sw-red-900: #6E1418;
  --sw-red-800: #8E1B20;
  --sw-red-700: #A81F26;
  --sw-red-600: #C1272D;
  --sw-red-500: #D64541;
  --sw-red-100: #F3D9D6;

  --sw-mustard-700: #B87418;
  --sw-mustard-600: #D98E2B;
  --sw-mustard-500: #E8A33D;
  --sw-mustard-300: #F2C878;

  --sw-bun-700: #9A5F2E;
  --sw-bun-500: #C4884A;
  --sw-bun-300: #E2B071;

  /* ---- semantic (light / paper) ---- */
  --sw-bg:            var(--sw-paper-100);
  --sw-bg-inverse:    var(--sw-ink-800);
  --sw-surface:       var(--sw-paper-200);
  --sw-surface-raise: var(--sw-paper-50);
  --sw-text:          var(--sw-ink-800);
  --sw-text-muted:    var(--sw-ink-500);
  --sw-text-inverse:  var(--sw-paper-100);
  --sw-brand:         var(--sw-red-600);
  --sw-brand-hover:   var(--sw-red-700);
  --sw-brand-active:  var(--sw-red-800);
  --sw-accent:        var(--sw-mustard-500);
  --sw-border:        var(--sw-ink-800);
  --sw-border-subtle: var(--sw-paper-300);
  --sw-focus:         var(--sw-mustard-500);
  --sw-success:       #3F6B41;
  --sw-warning:       var(--sw-mustard-600);
  --sw-danger:        var(--sw-red-600);
  --sw-shadow-color:  var(--sw-ink-800);

  /* ---- type ---- */
  --sw-font-display:  "Alfa Slab One", Rockwell, Georgia, serif;
  --sw-font-headline: "Oswald", Haettenschweiler, Impact, sans-serif;
  --sw-font-script:   "Yellowtail", "Brush Script MT", cursive;
  --sw-font-body:     "Barlow", "Helvetica Neue", Arial, sans-serif;

  --sw-text-xs:  0.75rem;
  --sw-text-sm:  0.875rem;
  --sw-text-md:  1rem;
  --sw-text-lg:  1.125rem;
  --sw-text-xl:  1.375rem;
  --sw-text-2xl: 1.75rem;
  --sw-text-3xl: 2.25rem;
  --sw-text-4xl: 3rem;
  --sw-text-5xl: 4rem;

  --sw-track-tight: -0.01em;
  --sw-track-wide:  0.06em;
  --sw-track-wider: 0.12em;

  --sw-lead-tight:   1.02;
  --sw-lead-snug:    1.18;
  --sw-lead-normal:  1.5;
  --sw-lead-relaxed: 1.65;

  /* ---- space ---- */
  --sw-space-1: 0.25rem;
  --sw-space-2: 0.5rem;
  --sw-space-3: 0.75rem;
  --sw-space-4: 1rem;
  --sw-space-5: 1.5rem;
  --sw-space-6: 2rem;
  --sw-space-7: 3rem;
  --sw-space-8: 4rem;
  --sw-space-9: 6rem;

  /* ---- shape ---- */
  --sw-radius-none: 0;
  --sw-radius-sm: 2px;
  --sw-radius-md: 4px;
  --sw-radius-lg: 8px;
  --sw-radius-full: 9999px;

  --sw-border-hairline: 1px;
  --sw-border-rule: 2px;
  --sw-border-heavy: 3px;
  --sw-border-poster: 6px;

  --sw-shadow-block:    3px 3px 0 var(--sw-shadow-color);
  --sw-shadow-block-lg: 5px 5px 0 var(--sw-shadow-color);
  --sw-shadow-press:    1px 1px 0 var(--sw-shadow-color);

  /* ---- motion ---- */
  --sw-dur-fast: 90ms;
  --sw-dur-base: 160ms;
  --sw-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- layout ---- */
  --sw-container: 72rem;
  --sw-container-narrow: 44rem;
}

/* Dark theme: the firehouse after dark. Ink ground, cream type, red stays loud.
   Applied via [data-theme="dark"] and honoured by system preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sw-bg:            var(--sw-ink-900);
    --sw-bg-inverse:    var(--sw-paper-100);
    --sw-surface:       var(--sw-ink-800);
    --sw-surface-raise: var(--sw-ink-700);
    --sw-text:          var(--sw-paper-100);
    --sw-text-muted:    var(--sw-paper-400);
    --sw-text-inverse:  var(--sw-ink-900);
    --sw-brand:         var(--sw-red-500);
    --sw-brand-hover:   var(--sw-red-600);
    --sw-brand-active:  var(--sw-red-700);
    --sw-border:        var(--sw-paper-100);
    --sw-border-subtle: var(--sw-ink-600);
    --sw-shadow-color:  #000000;
  }
}

:root[data-theme="dark"] {
  --sw-bg:            var(--sw-ink-900);
  --sw-bg-inverse:    var(--sw-paper-100);
  --sw-surface:       var(--sw-ink-800);
  --sw-surface-raise: var(--sw-ink-700);
  --sw-text:          var(--sw-paper-100);
  --sw-text-muted:    var(--sw-paper-400);
  --sw-text-inverse:  var(--sw-ink-900);
  --sw-brand:         var(--sw-red-500);
  --sw-brand-hover:   var(--sw-red-600);
  --sw-brand-active:  var(--sw-red-700);
  --sw-border:        var(--sw-paper-100);
  --sw-border-subtle: var(--sw-ink-600);
  --sw-shadow-color:  #000000;
}