/* ---------------------------------------------------------------------------
 * LESS Token Baseline for designless.studio
 *
 * Maps the --ts-* LESS token namespace to the exact values currently used
 * on the marketing site. This file is a zero-drift bridge: the page looks
 * IDENTICAL but now runs on LESS tokens that can be swapped at runtime.
 *
 * Generated from: designless-website/index.html :root variables
 * DO NOT EDIT by hand — regenerate from the canonical mapping table in
 * docs/less-assistant-v2/06-phase5-landing-page.md
 * ---------------------------------------------------------------------------
 */

:root {
  /* ── Color: Brand ──────────────────────────────────────────────────────── */
  --ts-color-brand-primary: #C0562B;
  --ts-color-brand-primary-muted: #C0562B40;
  --ts-color-brand-primary-hover: #D4724E;
  --ts-color-brand-secondary: #7A8B6F;
  --ts-color-brand-secondary-muted: #7A8B6F30;
  --ts-color-brand-accent: #D4AF6B;

  /* ── Color: Background / Surface ───────────────────────────────────────── */
  --ts-color-bg-surface-dark: #0D0D0D;
  --ts-color-bg-surface-light: #F5F2ED;
  --ts-color-bg-surface-alt: #EBE7E0;

  /* ── Color: Text ───────────────────────────────────────────────────────── */
  --ts-color-text-primary: #1A1A1A;
  --ts-color-text-secondary: #6B6560;
  --ts-color-text-on-dark: #F5F2ED;
  --ts-color-text-on-dark-muted: rgba(245, 242, 237, 0.55);
  --ts-color-text-white: #FFFFFF;

  /* ── Color: State ──────────────────────────────────────────────────────── */
  --ts-color-state-info: #00D9FF;

  /* ── Color: Border ─────────────────────────────────────────────────────── */
  --ts-color-border-default: #E0DDD9;
  --ts-color-border-on-dark: rgba(255, 255, 255, 0.06);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --ts-font-display: 'Space Grotesk', system-ui, sans-serif;
  --ts-font-sans: 'Inter', system-ui, sans-serif;
  --ts-font-mono: 'IBM Plex Mono', monospace;

  /* ── Spacing Scale ─────────────────────────────────────────────────────── */
  --ts-space-xs: 0.25rem;
  --ts-space-sm: 0.5rem;
  --ts-space-md: 1rem;
  --ts-space-lg: 2rem;
  --ts-space-xl: 4rem;
  --ts-space-2xl: 6rem;

  /* ── Border Radius ─────────────────────────────────────────────────────── */
  --ts-radius-sm: 4px;
  --ts-radius-md: 6px;
  --ts-radius-lg: 12px;
  --ts-radius-xl: 20px;
  --ts-radius-pill: 9999px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --ts-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ts-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --ts-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --ts-transition-fast: 150ms ease;
  --ts-transition-normal: 300ms ease;
  --ts-transition-slow: 500ms ease;
  --ts-transition-color: color 300ms ease-out, background-color 300ms ease-out, border-color 300ms ease-out;

  /* ── Backward compat: map old names to --ts-* ──────────────────────────── */
  --obsidian: var(--ts-color-bg-surface-dark);
  --terracotta: var(--ts-color-brand-primary);
  --terracotta-glow: var(--ts-color-brand-primary-muted);
  --terracotta-light: var(--ts-color-brand-primary-hover);
  --sage: var(--ts-color-brand-secondary);
  --sage-muted: var(--ts-color-brand-secondary-muted);
  --bone: var(--ts-color-bg-surface-light);
  --bone-dark: var(--ts-color-bg-surface-alt);
  --near-black: var(--ts-color-text-primary);
  --warm-gray: var(--ts-color-text-secondary);
  --gold: var(--ts-color-brand-accent);
  --cyan: var(--ts-color-state-info);
  --white: var(--ts-color-text-white);
  --border-subtle: var(--ts-color-border-default);
  --font-display: var(--ts-font-display);
  --font-body: var(--ts-font-sans);
  --font-mono: var(--ts-font-mono);
}

/* ── Smooth token transitions when theme is swapped ──────────────────────── */
[data-less-transitioning] *,
[data-less-transitioning] *::before,
[data-less-transitioning] *::after {
  transition: var(--ts-transition-color) !important;
}