/* =============================================================
   Relax & Bloom — Design Tokens
   Three layers: PRIMITIVE -> SEMANTIC -> COMPONENT
   Source of truth: docs/brand-guidelines.md  (mirror: design-tokens.json)
   Components must consume semantic/component tokens, never raw hex.
   ============================================================= */

/* ============================ PRIMITIVES ============================ */
:root {
  /* Eucalypt forest ramp */
  --forest-950: #0f150f;
  --forest-900: #151c17;
  --forest-800: #1e2820;
  --forest-700: #2c3b30;
  --forest-600: #4a6250;
  --forest-500: #6b8770;
  --forest-400: #7fa07f;
  --forest-300: #a7b6a6;
  --forest-200: #cdd8cc;
  --forest-100: #e2e9e0;

  /* Warm stone (green-biased neutrals) */
  --stone-50:  #fffdf8;
  --stone-100: #f5f3ec;
  --stone-200: #e8e4d8;
  --stone-300: #d6d1c1;
  --stone-500: #8b897c;
  --stone-600: #5c6157;
  --stone-900: #1a1f1b;

  /* Pink robin / rose quartz accent */
  --rose-300: #ecc4bf;
  --rose-400: #e0a6a0;
  --rose-500: #cf7d7a;
  --rose-600: #b85f5d;

  /* Salt-lamp amber (ambient glow only) */
  --amber-300: #f0c58a;
  --amber-400: #e6a765;
  --amber-500: #d98f4e;

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

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --size-xs: 0.75rem; --size-sm: 0.875rem; --size-base: 1rem; --size-lg: 1.125rem;
  --size-xl: 1.375rem; --size-2xl: 1.75rem; --size-3xl: 2.25rem; --size-4xl: 3rem; --size-5xl: 4rem;

  /* Radius / shadow / motion */
  --radius-sm: 0.5rem; --radius-md: 1rem; --radius-lg: 1.5rem; --radius-full: 999px;
  --shadow-sm: 0 6px 16px -10px rgba(21, 28, 23, 0.30);
  --shadow-md: 0 18px 40px -20px rgba(21, 28, 23, 0.45);
  --shadow-lg: 0 34px 70px -28px rgba(21, 28, 23, 0.55);
  --dur-fast: 180ms; --dur-normal: 320ms; --dur-slow: 700ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================ SEMANTIC (light) ============================ */
:root {
  --color-bg: var(--stone-100);
  --color-bg-raised: var(--stone-50);
  --color-fg: var(--stone-900);
  --color-fg-muted: var(--stone-600);
  --color-brand: var(--forest-600);
  --color-brand-strong: var(--forest-800);
  --color-surface-inverse: var(--forest-900);
  --color-on-inverse: var(--forest-100);
  --color-on-inverse-muted: var(--forest-300);
  --color-accent: var(--rose-500);
  --color-accent-soft: var(--rose-400);
  --color-glow: var(--amber-500);
  --color-border: var(--stone-200);
  --color-border-inverse: var(--forest-700);
  --color-ring: var(--forest-500);
  color-scheme: light;
}

/* Semantic overrides — dark. Applied by OS preference and by explicit toggle.
   Token-level only: components never reference raw hex or media queries directly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--forest-900);
    --color-bg-raised: var(--forest-800);
    --color-fg: var(--forest-100);
    --color-fg-muted: var(--forest-300);
    --color-brand: var(--forest-400);
    --color-brand-strong: var(--forest-300);
    --color-surface-inverse: var(--forest-950);
    --color-on-inverse: var(--forest-100);
    --color-on-inverse-muted: var(--forest-300);
    --color-accent: var(--rose-400);
    --color-accent-soft: var(--rose-300);
    --color-glow: var(--amber-400);
    --color-border: var(--forest-700);
    --color-border-inverse: var(--forest-700);
    --color-ring: var(--forest-400);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--forest-900);
  --color-bg-raised: var(--forest-800);
  --color-fg: var(--forest-100);
  --color-fg-muted: var(--forest-300);
  --color-brand: var(--forest-400);
  --color-brand-strong: var(--forest-300);
  --color-surface-inverse: var(--forest-950);
  --color-on-inverse: var(--forest-100);
  --color-on-inverse-muted: var(--forest-300);
  --color-accent: var(--rose-400);
  --color-accent-soft: var(--rose-300);
  --color-glow: var(--amber-400);
  --color-border: var(--forest-700);
  --color-border-inverse: var(--forest-700);
  --color-ring: var(--forest-400);
  color-scheme: dark;
}

/* ============================ COMPONENT ============================ */
:root {
  --btn-primary-bg: var(--color-brand);
  --btn-primary-fg: var(--stone-50);
  --btn-primary-hover: var(--color-brand-strong);
  --btn-radius: var(--radius-full);
  --btn-pad: var(--space-3) var(--space-6);

  --card-bg: var(--color-bg-raised);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-pad: var(--space-8);
  --card-shadow: var(--shadow-sm);

  --eyebrow-color: var(--color-accent);
  --eyebrow-tracking: 0.18em;
}