/* ============================================================
   Danaides Studios — Design Tokens
   Warm Cycladic / Earthy · 3-layer architecture
   Layer 1: Primitive  → raw values
   Layer 2: Semantic    → purpose aliases
   Layer 3: Component   → component-specific
   ============================================================ */

:root {
  /* ---------- Layer 1 — PRIMITIVE ---------- */

  /* Terracotta (primary brand) */
  --c-terracotta-50:  #FBEFE9;
  --c-terracotta-100: #F4D8CB;
  --c-terracotta-300: #D98E6E;
  --c-terracotta-500: #9A3412;
  --c-terracotta-600: #87300F;
  --c-terracotta-700: #6E270D;

  /* Ochre / gold (secondary) */
  --c-ochre-300: #E0A155;
  --c-ochre-500: #B45309;
  --c-ochre-600: #964507;

  /* Aegean blue (accent) */
  --c-aegean-400: #2E7E96;
  --c-aegean-500: #1E5F74;
  --c-aegean-700: #15485A;

  /* Sand / neutrals */
  --c-cream-50:  #FFFDFA;
  --c-cream-100: #FBF7F0;   /* page background */
  --c-sand-200:  #F1E8DA;
  --c-sand-300:  #E7DDCF;   /* borders */
  --c-clay-600:  #6B5E54;   /* muted text */
  --c-charcoal-900: #2A2320; /* primary text */
  --c-white: #FFFFFF;

  /* Typography primitives */
  --font-heading: 'Tinos', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 2rem;      /* 32 */
  --fs-3xl: 2.75rem;   /* 44 */
  --fs-4xl: 3.75rem;   /* 60 */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing (4/8 rhythm) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px rgba(42, 35, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(42, 35, 32, 0.10);
  --shadow-lg: 0 20px 48px rgba(42, 35, 32, 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;

  /* ---------- Layer 2 — SEMANTIC ---------- */
  --color-primary: var(--c-terracotta-500);
  --color-primary-hover: var(--c-terracotta-600);
  --color-primary-active: var(--c-terracotta-700);
  --color-secondary: var(--c-ochre-500);
  --color-accent: var(--c-aegean-500);
  --color-accent-hover: var(--c-aegean-700);

  --color-bg: var(--c-cream-100);
  --color-surface: var(--c-white);
  --color-surface-alt: var(--c-sand-200);
  --color-text: var(--c-charcoal-900);
  --color-text-muted: var(--c-clay-600);
  --color-text-on-primary: var(--c-cream-50);
  --color-border: var(--c-sand-300);
  --color-ring: var(--c-aegean-500);

  /* ---------- Layer 3 — COMPONENT ---------- */
  /* Buttons */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-primary-text: var(--color-text-on-primary);
  --btn-radius: var(--radius-pill);
  --btn-shadow: var(--shadow-sm);
  --btn-shadow-hover: var(--shadow-md);

  /* Header / nav */
  --header-bg: rgba(251, 247, 240, 0.88);
  --header-border: var(--color-border);
  --nav-link: var(--color-text);
  --nav-link-active: var(--color-primary);

  /* Cards */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);

  /* Section bands */
  --band-bg: var(--color-surface-alt);
  --cta-band-bg: var(--c-terracotta-500);
  --cta-band-text: var(--color-text-on-primary);

  /* Footer */
  --footer-bg: var(--c-charcoal-900);
  --footer-text: #E9E0D6;
  --footer-muted: #B6A99C;
}

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