/**
 * C&D Lift — Design tokens
 * Chassis: Linear (surfaces, hairlines, type rhythm)
 * Brand: cherry mood + action red + gold atmosphere + cream inverse bands
 *
 * Inverse canvas: Warm Beige #f4ede4 (--color-inverse-canvas-warm-beige).
 * Vanilla cream retained as reference only (palette comparison page).
 */

:root {
  color-scheme: dark;

  /* ─── Canvas & surfaces (Linear ladder, cool anchor) ─── */
  --color-canvas: #010102;
  --color-surface-1: #0f1012;
  --color-surface-2: #16181c;
  --color-surface-3: #1c1f24;
  --color-surface-4: #23262c;

  --color-hairline: #23252a;
  --color-hairline-strong: #2e3138;
  --color-hairline-tertiary: #3a3d45;

  /* ─── Brand red family ─── */
  --color-cherry: #74070e;
  --color-primary: #c1121f;
  --color-primary-hover: #d62828;
  --color-primary-focus: #9a0f1a;
  --color-primary-pressed: #7f0418;

  --color-on-primary: #ffffff;

  /* ─── Gold / flare (atmosphere & rare highlights) ─── */
  --color-accent-gold: #ffaa00;
  --color-accent-gold-muted: #ffae2e;
  --color-accent-flare: #e8003a;

  /* ─── Inverse / light bands (canonical: Warm Beige #f4ede4) ─── */
  --color-inverse-canvas-warm-beige: #f4ede4;
  --color-inverse-canvas-vanilla-cream: #fdf0d5; /* reference / comparison only */
  --color-inverse-canvas: #f4ede4;
  --color-inverse-surface-1: #ebe4da;
  --color-inverse-surface-2: #e0d8cc;
  --color-inverse-ink: #111111;
  --color-inverse-ink-muted: #3d3d3d;
  --color-inverse-ink-subtle: #666666;
  --color-hairline-on-light: #d2d2d2;

  /* ─── Text on dark ─── */
  --color-ink: #f7f8f8;
  --color-ink-muted: #d0d6e0;
  --color-ink-subtle: #8a8f98;
  --color-ink-tertiary: #62666d;

  /* ─── Semantic (product truth) ─── */
  --color-semantic-success: #27a644;
  --color-semantic-warning: #f13a2c;
  --color-semantic-error: #e6001e;
  --color-semantic-info: #4c98b9;
  --color-semantic-overlay: rgba(0, 0, 0, 0.72);

  /* ─── Gradients (marketing / auth only — use sparingly) ─── */
  --gradient-hero-depth: radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(255, 170, 0, 0.06) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 50% at 80% 20%,
      rgba(116, 7, 14, 0.12) 0%,
      transparent 50%
    ),
    var(--color-canvas);
  --gradient-primary-cta: linear-gradient(180deg, var(--color-cherry) 0%, var(--color-primary) 100%);
  --gradient-solar-flare: linear-gradient(180deg, var(--color-accent-gold) 0%, var(--color-accent-flare) 100%);

  /* ─── Typography ─── */
  --font-sans: "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-size-display-xl: 5rem;
  --font-size-display-lg: 3.5rem;
  --font-size-display-md: 2.5rem;
  --font-size-headline: 1.75rem;
  --font-size-card-title: 1.375rem;
  --font-size-subhead: 1.25rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-caption: 0.75rem;
  --font-size-eyebrow: 0.8125rem;
  --font-size-button: 0.875rem;

  --font-weight-display: 600;
  --font-weight-body: 400;
  --font-weight-button: 500;
  --font-weight-eyebrow: 500;

  --line-height-tight: 1.05;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.4;

  --letter-spacing-display-xl: -0.1875em;
  --letter-spacing-display-lg: -0.032em;
  --letter-spacing-body: -0.003em;
  --letter-spacing-eyebrow: 0.025em;

  /* ─── Spacing (4px base) ─── */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-section: 6rem;

  /* ─── Radius ─── */
  --rounded-xs: 4px;
  --rounded-sm: 6px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-xxl: 24px;
  --rounded-pill: 9999px;
  --rounded-full: 9999px;
  --rounded-none: 0;

  /* ─── Layout ─── */
  --container-max: 80rem;
  --nav-height: 3.5rem;

  /* ─── Focus ─── */
  --focus-ring-width: 2px;
  --focus-ring-color: color-mix(in srgb, var(--color-primary-focus) 50%, transparent);
}

/* ─── Light theme: remap semantic tokens to Warm Beige ladder ─── */
[data-theme="light"] {
  color-scheme: light;

  --color-canvas: #f4ede4;
  --color-surface-1: #ebe4da;
  --color-surface-2: #e0d8cc;
  --color-surface-3: #d8cfc2;
  --color-surface-4: #cfc4b6;

  --color-hairline: #d2d2d2;
  --color-hairline-strong: #c4c4c4;
  --color-hairline-tertiary: #b5b5b5;

  --color-ink: #111111;
  --color-ink-muted: #3d3d3d;
  --color-ink-subtle: #666666;
  --color-ink-tertiary: #888888;

  --color-semantic-overlay: rgba(0, 0, 0, 0.45);

  --gradient-hero-depth: radial-gradient(
      ellipse 80% 60% at 50% 0%,
      rgba(255, 170, 0, 0.08) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 70% 50% at 80% 20%,
      rgba(116, 7, 14, 0.06) 0%,
      transparent 50%
    ),
    var(--color-canvas);
}

/* ─── Auto: OS preference (default :root = dark) ─── */
[data-theme="auto"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;

    --color-canvas: #f4ede4;
    --color-surface-1: #ebe4da;
    --color-surface-2: #e0d8cc;
    --color-surface-3: #d8cfc2;
    --color-surface-4: #cfc4b6;

    --color-hairline: #d2d2d2;
    --color-hairline-strong: #c4c4c4;
    --color-hairline-tertiary: #b5b5b5;

    --color-ink: #111111;
    --color-ink-muted: #3d3d3d;
    --color-ink-subtle: #666666;
    --color-ink-tertiary: #888888;

    --color-semantic-overlay: rgba(0, 0, 0, 0.45);

    --gradient-hero-depth: radial-gradient(
        ellipse 80% 60% at 50% 0%,
        rgba(255, 170, 0, 0.08) 0%,
        transparent 55%
      ),
      radial-gradient(
        ellipse 70% 50% at 80% 20%,
        rgba(116, 7, 14, 0.06) 0%,
        transparent 50%
      ),
      var(--color-canvas);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* Cream comparison helpers (palette page only) */
[data-inverse-cream="warm-beige"] {
  --color-inverse-canvas: var(--color-inverse-canvas-warm-beige);
}
[data-inverse-cream="vanilla-cream"] {
  --color-inverse-canvas: var(--color-inverse-canvas-vanilla-cream);
}