/* ============================================================
   Peaceful Petals — design tokens
   Working values from the build handoff. Sample the original
   logo before locking these. Gold is an accent, never body
   text on cream.
   ============================================================ */

:root {
  /* Palette */
  --ink: #F4EFE8;
  --charcoal: #111111;
  --charcoal-2: #1A1A1A;
  --gold: #C9A65D;
  --gold-soft: #E0C98F;
  --cream: #000000;
  --stone: #181818;
  --plum: #C4ACB7;
  --white: #0D0D0D;

  /* Semantic */
  --color-bg: var(--cream);
  --color-surface: #101010;
  --color-surface-2: var(--stone);
  --color-light: #0D0D0D;
  --color-light-2: var(--stone);
  --color-text: var(--ink);
  --color-text-dark: var(--ink);
  --color-muted: #AAA29D;
  --color-muted-dark: #C9C1BB;
  --color-accent: var(--gold);
  --color-accent-soft: var(--gold-soft);
  --color-border: rgba(244, 239, 232, 0.18);
  --color-border-light: rgba(244, 239, 232, 0.12);
  --color-error: #F0A094;
  --color-success: #9DDBAE;

  /* Type */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-script: "Pinyon Script", cursive;

  --fs-h1: clamp(2.65rem, 5vw, 4.8rem);
  --fs-h2: clamp(2rem, 3.5vw, 3.35rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 1.85rem);
  --fs-h4: 1.2rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  /* Spacing (8px grid) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Radius + shadow */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 5px 18px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.42);
  --shadow-gold: none;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;

  /* Layout */
  --maxw: 1240px;
  --maxw-text: 680px;
  --header-h: 78px;
  --gutter: clamp(1rem, 3vw, 2.75rem);
  --radius-button: 999px;
}

/* Peaceful Petals is intentionally dark-only. The server renders this
   attribute, while the root values above provide the same safe fallback. */
:root[data-theme="dark"] {
  color-scheme: dark;
}