/* ============================================================================
   DropsA — Semantic design tokens (compat layer).
   Canonical values live in /css/ds/tokens.css. Every --color-*, --space-*,
   --radius-*, --shadow-* name here is kept for design-system.css,
   components.css, and style.css — values derive from the paper/orange DS.
   ============================================================================ */
@import url('/css/ds/tokens.css');

:root {
  /* ===== Raw ramps (warm aliases — legacy selectors may still reference these) ===== */
  --navy-900: var(--ds-dark);
  --navy-800: var(--ds-dark);
  --navy-700: var(--ds-dark-2);
  --navy-600: var(--ds-ink-2);
  --navy-500: var(--ds-muted);
  --amber-600: var(--ds-brand-d);
  --amber-500: var(--ds-brand);
  --amber-300: var(--ds-brand-l);
  --amber-100: var(--ds-cream);
  --bronze-700: var(--ds-brand-d);
  --steel-900: var(--ds-ink);
  --steel-700: var(--ds-ink-2);
  --steel-500: var(--ds-muted);
  --steel-300: var(--ds-line);
  --steel-200: var(--ds-line);
  --steel-100: var(--ds-line-soft);
  --steel-50: var(--ds-cream);
  --white: var(--ds-white);

  /* ===== Semantic colors ===== */
  --color-primary: var(--ds-dark);
  --color-primary-dark: var(--ds-dark-2);
  --color-secondary: var(--ds-muted);
  --color-accent: var(--ds-brand);
  --color-accent-dark: var(--ds-brand-d);
  --color-accent-text: var(--ds-brand-d);
  --color-ink: var(--ds-ink);
  --color-body: var(--ds-ink-2);
  --color-muted: var(--ds-muted);
  --color-on-dark: #f4ede2;
  --color-surface: var(--ds-white);
  --color-surface-alt: var(--ds-cream);
  --color-bg: var(--ds-paper);
  --color-line: var(--ds-line);
  --color-success: #1f9d57;
  --color-danger: #b30000;
  --color-info: var(--ds-brand-d);

  /* ===== Typography ===== */
  --font-sans: var(--ds-font);
  --font-mono: var(--ds-mono);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --text-display: clamp(2.4rem, 1.5rem + 3vw, 3.25rem);
  --text-h1: clamp(2.1rem, 1.4rem + 2.4vw, 2.8rem);
  --text-h2: clamp(1.7rem, 1.2rem + 1.6vw, 2.1rem);
  --text-h3: 1.4rem;
  --text-h4: 1.18rem;
  --text-body: 1.0625rem;
  --text-small: 0.9rem;
  --text-eyebrow: 0.74rem;
  --leading-tight: 1.12;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.5px;
  --tracking-eyebrow: 0.14em;

  /* ===== Spacing ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --spacing-section: clamp(48px, 6vw, 88px);
  --container-width: var(--ds-wrap);

  /* ===== Radii ===== */
  --radius-sm: var(--ds-r-sm);
  --radius-md: var(--ds-r-md);
  --radius-lg: var(--ds-r-lg);
  --radius-pill: var(--ds-r-pill);
  --radius-card: var(--ds-r-lg);
  --radius-button: var(--ds-r-md);

  /* ===== Shadows ===== */
  --shadow-1: var(--ds-shadow-card);
  --shadow-2: var(--ds-shadow-hover);
  --shadow-3: 0 24px 56px -20px rgba(23, 21, 15, 0.35);
  --shadow-card: var(--ds-shadow-card);
  --shadow-card-hover: var(--ds-shadow-hover);

  /* ===== Focus ===== */
  --focus-ring: 0 0 0 3px rgba(255, 77, 35, 0.35);

  /* ===== Back-compat aliases (home-d2.css and older consumers) ===== */
  --ds-navy-900: var(--ds-dark);
  --ds-navy-800: var(--ds-dark);
  --ds-navy-700: var(--ds-dark-2);
  --ds-navy-600: var(--ds-ink-2);
  --ds-navy-500: var(--ds-muted);
  --ds-amber-600: var(--ds-brand-d);
  --ds-amber-500: var(--ds-brand);
  --ds-amber-300: var(--ds-brand-l);
  --ds-amber-100: var(--ds-cream);
  --ds-steel-900: var(--ds-ink);
  --ds-steel-700: var(--ds-ink-2);
  --ds-steel-500: var(--ds-muted);
  --ds-steel-300: var(--ds-line);
  --ds-steel-200: var(--ds-line);
  --ds-steel-100: var(--ds-line-soft);
  --ds-steel-50: var(--ds-cream);
  --ds-text: var(--color-body);
  --ds-text-strong: var(--color-ink);
  --ds-text-muted: var(--color-muted);
  --ds-text-on-dark: var(--color-on-dark);
  --ds-success: var(--color-success);
  --ds-danger: var(--color-danger);
  --ds-info: var(--color-info);
  --ds-bg: var(--color-bg);
  --ds-surface: var(--color-surface);
  --ds-surface-alt: var(--color-surface-alt);
  --ds-sh-1: var(--shadow-1);
  --ds-sh-2: var(--shadow-2);
  --ds-sh-3: var(--shadow-3);
  --ds-s-1: var(--space-1);
  --ds-s-2: var(--space-2);
  --ds-s-3: var(--space-3);
  --ds-s-4: var(--space-4);
  --ds-s-5: var(--space-5);
  --ds-s-6: var(--space-6);
  --ds-s-7: var(--space-7);
  --ds-s-8: var(--space-8);
  --ds-s-9: var(--space-9);
  --ds-fw-reg: var(--fw-regular);
  --ds-fw-med: var(--fw-medium);
  --ds-fw-semi: var(--fw-semibold);
  --ds-fw-bold: var(--fw-bold);
  --ds-focus: var(--focus-ring);
}