/* CodeClaudia — Design Tokens
   Single source of truth for all visual decisions.
   Consumed by design-test.html and index.html. */

:root {
  /* ── Palette ── */

  /* Background — tinted warm off-white. Never #fff. */
  --color-bg: #FAF8F5;
  /* Card surface — slightly deeper, differentiates cards without shadows. */
  --color-surface: #F4F0EB;
  /* Card hover — subtle shift on interactive cards. */
  --color-surface-hover: #EDE8E2;

  /* Text primary — near-black with warm undertone. Never #000. */
  --color-text-primary: #2D2520;
  /* Text secondary — muted warm gray for body text. WCAG AA 4.5:1 on both bg and surface. */
  --color-text-secondary: #786A62;
  /* Text tertiary — darker muted gray for fine print, legal, footnote. WCAG AA 4.5:1 on bg. */
  --color-text-tertiary: #957F75;

  /* Accent — terracotta, brand-defining. Large text (buttons) passes WCAG AA 3:1 on bg. */
  --color-accent: #C47A5A;
  /* Accent hover — darker terracotta for button/links hover. */
  --color-accent-hover: #AD6B4F;
  /* Accent text — darker terracotta for small text only (labels, tags). WCAG AA 4.5:1 on bg. */
  --color-accent-text: #A0634B;
  /* Accent light — very subtle terracotta tint, for tag backgrounds. */
  --color-accent-light: #F5E8E2;

  /* Success — muted green for form confirmation messages. */
  --color-success: #3B7A4E;

  /* Tech accent — softened lime/chartreuse. Signal faible, micro-détails only.
     Never: large CTAs, card backgrounds, hero sections, full titles. */
  --color-tech: #9FE870;
  --color-tech-light: #EDF9E0;

  /* Border — subtle warm hairline. */
  --color-border: #E8E2DC;
  /* Border strong — slightly more visible, for input focus rings. */
  --color-border-strong: #D4CEC7;

  /* ── Typography ── */

  /* One font family. Hierarchy = weight + scale only. */
  --font-family: 'Sora', sans-serif;

  /* Hero — 800 weight, large clamp. Used once per page. */
  --text-hero: 800 clamp(2.5rem, 5vw, 4rem)/1.15 var(--font-family);
  /* Headline — 600 weight, card titles, section headers. */
  --text-headline: 600 clamp(1.25rem, 3vw, 1.75rem)/1.3 var(--font-family);
  /* Body — 400 weight, generous line-height. 17-18px base. */
  --text-body: 400 clamp(1rem, 2vw, 1.125rem)/1.7 var(--font-family);
  /* Label — 400 weight, small, tracked for tags/dates. */
  --text-label: 400 0.75rem/1.5 var(--font-family);
  /* CTA — 600 weight, button text. */
  --text-cta: 600 1rem/1.4 var(--font-family);
  /* Body lead — 500 weight, emphasis within text. */
  --text-body-lead: 500 clamp(1.125rem, 2.5vw, 1.25rem)/1.6 var(--font-family);

  /* ── Spacing ── */

  --space-2xs: 2px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-section: 80px;

  /* ── Radius ── */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Motion ── */

  --transition-fast: 200ms ease;

  /* ── Layout ── */

  --max-width-content: 720px;
  --max-width-text: 600px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
  }
}