/* ============================================================
   CLASSIC PICKUP IDENTITY — Design Tokens
   Premium vintage automotive editorial palette.
   Dark enamel surfaces, warm cream text, oxidized brass + faded teal accents.
   ============================================================ */

:root {
  /* ---- Type scale (fluid, mobile-first) ---- */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);

  /* ---- 4px spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Radius ---- */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal:      420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Content widths ---- */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1240px;

  /* ---- Fonts ---- */
  --font-display: 'Boska', 'Source Serif 4', Georgia, serif;
  --font-body:    'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================
   DARK MODE — DEFAULT (signature look)
   ============================================================ */
:root,
[data-theme='dark'] {
  /* Surfaces — dark enamel & aged steel */
  --color-bg:               #14110d;  /* deep enamel */
  --color-surface:          #1a1612;  /* charcoal */
  --color-surface-2:        #221d18;  /* warm charcoal */
  --color-surface-offset:   #2a241e;  /* aged steel */
  --color-surface-offset-2: #332b23;
  --color-divider:          #2c2620;
  --color-border:           #3d342b;
  --color-border-strong:    #54483b;

  /* Text — warm cream */
  --color-text:         #f1e9d8;  /* primary cream */
  --color-text-muted:   #b3a48b;  /* warm taupe */
  --color-text-faint:   #7a6e5b;
  --color-text-inverse: #14110d;

  /* Primary accent — Oxidized Brass */
  --color-primary:           #c69647;
  --color-primary-hover:     #d8a958;
  --color-primary-active:    #a87b30;
  --color-primary-highlight: #3a2f1d;

  /* Secondary accent — Faded Teal */
  --color-secondary:           #5a8a82;
  --color-secondary-hover:     #6fa098;
  --color-secondary-highlight: #1f2e2c;

  /* Heritage red — for warning / streak indicators */
  --color-heritage-red:       #b6432e;
  --color-heritage-red-hover: #cc5a44;

  /* Semantic */
  --color-success:           #6a8c3e;
  --color-success-hover:     #7ea14a;
  --color-success-highlight: #2c3520;
  --color-error:             #b6432e;
  --color-error-hover:       #cc5a44;
  --color-error-highlight:   #3b211a;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(198, 150, 71, 0.35), 0 12px 32px rgba(198, 150, 71, 0.12);
}

/* ============================================================
   LIGHT MODE — ivory & aged paper variant
   ============================================================ */
[data-theme='light'] {
  --color-bg:               #f4ede0;
  --color-surface:          #faf4e8;
  --color-surface-2:        #fdf9ef;
  --color-surface-offset:   #ebe2d0;
  --color-surface-offset-2: #ddd2bd;
  --color-divider:          #d8cdb7;
  --color-border:           #c5b89e;
  --color-border-strong:    #a8987c;

  --color-text:         #2b231a;
  --color-text-muted:   #6b5e4a;
  --color-text-faint:   #9d8e74;
  --color-text-inverse: #faf4e8;

  --color-primary:           #8a5e1c;
  --color-primary-hover:     #6e4912;
  --color-primary-active:    #563806;
  --color-primary-highlight: #ead7b3;

  --color-secondary:           #2f5e57;
  --color-secondary-hover:     #1f4a44;
  --color-secondary-highlight: #c7dad6;

  --color-heritage-red:       #8c2e1f;
  --color-heritage-red-hover: #6e2114;

  --color-success:           #4d6c25;
  --color-success-hover:     #3a5519;
  --color-success-highlight: #d4ddc1;
  --color-error:             #8c2e1f;
  --color-error-hover:       #6e2114;
  --color-error-highlight:   #ecd1c8;

  --shadow-sm: 0 1px 2px rgba(40, 30, 15, 0.08);
  --shadow-md: 0 6px 18px rgba(40, 30, 15, 0.1);
  --shadow-lg: 0 18px 48px rgba(40, 30, 15, 0.14);
  --shadow-glow: 0 0 0 1px rgba(138, 94, 28, 0.35), 0 12px 32px rgba(138, 94, 28, 0.15);
}