/* =====================================================================
   AC Repair AC — Design Tokens
   Editorial publisher palette — "NYC Signal" direction.
   Warm cream surfaces, deep NYC-navy text/primary, electric cyan
   as the single signal accent (Signal / flow-of-cool metaphor).
   ===================================================================== */

:root,
[data-theme='light'] {
  /* Fluid type scale (clamp: mobile → desktop) */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);   /* 12 → 14 */
  --text-sm:    clamp(0.875rem, 0.8rem + 0.35vw, 1rem);      /* 14 → 16 */
  --text-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* 16 → 18 */
  --text-lg:    clamp(1.125rem, 1rem + 0.75vw, 1.5rem);      /* 18 → 24 */
  --text-xl:    clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);     /* 24 → 36 */
  --text-2xl:   clamp(2rem, 1.2rem + 2.5vw, 3.5rem);         /* 32 → 56 */
  --text-3xl:   clamp(2.5rem, 1rem + 4vw, 5rem);             /* 40 → 80 */

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

  /* Surfaces — warm cream (Signal palette body) */
  --color-bg:               #f5f2ec;
  --color-surface:          #faf7f0;
  --color-surface-2:        #ffffff;
  --color-surface-offset:   #ece7dc;
  --color-surface-dynamic:  #dfd8c6;
  --color-divider:          #ded7c5;
  --color-border:           #cec6b1;

  /* Text — deep NYC-navy (unified with primary for editorial voice) */
  --color-text:         #0a1628;
  --color-text-muted:   #5b6472;
  --color-text-faint:   #9aa1ad;
  --color-text-inverse: #f5f2ec;

  /* Primary — deep NYC navy */
  --color-primary:           #0a1628;
  --color-primary-hover:     #152441;
  --color-primary-active:    #1e335a;
  --color-primary-highlight: #d5dae4;

  /* Accent — electric cyan (Signal — the single brand accent) */
  --color-accent:            #00b8a3;   /* AA on cream body (contrast ≥ 4.8) */
  --color-accent-hover:      #00967f;
  --color-accent-highlight:  #cbf3ec;

  /* Signal cyan — pure brand mark (use on dark surfaces / logo / signal dot) */
  --color-signal:            #00d9c0;
  --color-signal-glow:       rgba(0,217,192,0.45);

  /* Star gold — kept only for rating stars in review widgets */
  --color-star: #d19900;

  /* Success (verified) / Warning (advisory) / Error */
  --color-success:           #2f6d1e;
  --color-success-highlight: #d8e5cf;
  --color-warning:           #964219;
  --color-warning-highlight: #ecd8c9;
  --color-error:             #a12c2c;

  /* Radius — pill-ish for signal CTA, still restrained for cards */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows (cool-tinted for Signal palette) */
  --shadow-sm: 0 1px 2px oklch(0.2 0.03 240 / 0.06);
  --shadow-md: 0 4px 14px oklch(0.2 0.03 240 / 0.09);
  --shadow-lg: 0 12px 36px oklch(0.2 0.03 240 / 0.14);

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

  /* Fonts
     - Display: Satoshi (modern humanist grotesque, warm + technical)
     - Body:    Inter (legibility for long-form editorial reviews)
     - Editorial serif retained via --font-editorial for review bylines etc. */
  --font-display:   'Satoshi', 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:      'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Layout */
  --header-height: 68px;
}

/* Dark mode — inverted Signal: navy body, cyan signal stays cyan */
[data-theme='dark'] {
  --color-bg:              #06101f;
  --color-surface:         #0a1628;
  --color-surface-2:       #0f1c33;
  --color-surface-offset:  #0d1929;
  --color-surface-dynamic: #152441;
  --color-divider:         #1a2a47;
  --color-border:          #253a5c;
  --color-text:            #e6ecf5;
  --color-text-muted:      #8892a5;
  --color-text-faint:      #58627a;
  --color-text-inverse:    #06101f;

  --color-primary:           #7fb8ff;
  --color-primary-hover:     #a3c9ff;
  --color-primary-active:    #c1daff;
  --color-primary-highlight: #142c4e;

  --color-accent:            #4de4ce;
  --color-accent-hover:      #7defda;
  --color-accent-highlight:  #0e3a34;

  --color-signal:            #00d9c0;
  --color-signal-glow:       rgba(0,217,192,0.55);

  --color-star: #e8c157;

  --color-success:           #7bb055;
  --color-success-highlight: #1e3018;
  --color-warning:           #d18b52;
  --color-warning-highlight: #3a2a1c;
  --color-error:             #d97070;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md: 0 4px 14px oklch(0 0 0 / 0.5);
  --shadow-lg: 0 12px 36px oklch(0 0 0 / 0.6);
}

/* System preference — only applies if no explicit toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #06101f;
    --color-surface:         #0a1628;
    --color-surface-2:       #0f1c33;
    --color-surface-offset:  #0d1929;
    --color-surface-dynamic: #152441;
    --color-divider:         #1a2a47;
    --color-border:          #253a5c;
    --color-text:            #e6ecf5;
    --color-text-muted:      #8892a5;
    --color-text-faint:      #58627a;
    --color-text-inverse:    #06101f;
    --color-primary:         #7fb8ff;
    --color-primary-hover:   #a3c9ff;
    --color-primary-highlight:#142c4e;
    --color-accent:          #4de4ce;
    --color-signal:          #00d9c0;
    --color-star:            #e8c157;
  }
}