/* Studio 1279 — design tokens (Editorial Maison system).
   Every visible value (color, spacing, font, radius, shadow, motion) comes from
   here. Override at :root or via [data-theme] to re-skin the whole site.

   Naming kept stable so existing components keep working; values reskinned to
   the editorial-maison palette: bone & ivory paper, deep noir ink, a single
   oxblood accent, antique-brass trim. */

:root {
  /* ── Brand palette ──────────────────────────────────────────────────────
     Warm noir + bone paper. Oxblood is the single brand accent, used
     sparingly. Brass is a secondary metal trim for dividers / details. */
  --color-ink-950: hsl(22, 16%, 6%);
  --color-ink-900: hsl(22, 14%, 11%);
  --color-ink-800: hsl(22, 12%, 16%);
  --color-ink-700: hsl(22, 10%, 24%);
  --color-ink-500: hsl(22, 8%, 42%);
  --color-ink-400: hsl(22, 6%, 54%);
  --color-ink-300: hsl(22, 6%, 68%);
  --color-ink-200: hsl(22, 8%, 82%);

  --color-paper: hsl(36, 28%, 95%);       /* warm bone */
  --color-paper-2: hsl(36, 24%, 91%);     /* ivory, elevated surfaces' shadow */
  --color-paper-3: hsl(34, 18%, 86%);     /* deeper bone for sections */
  --color-bone: hsl(40, 32%, 97%);        /* cleanest paper */
  --color-line: hsl(28, 12%, 84%);

  /* Muted paper text on the noir ground (legible greys that read as warm
     paper on dark sections — le/de, captions, quiet links, codas). A short
     scale so the noir cluster never hardcodes these greys. */
  --color-paper-muted-on-noir: hsl(36, 16%, 82%);      /* lightest muted paper */
  --color-paper-muted-on-noir-2: hsl(36, 16%, 80%);    /* default muted paper */
  --color-paper-muted-on-noir-3: hsl(36, 14%, 78%);    /* figcaptions on noir */
  --color-paper-muted-on-noir-soft: hsl(36, 14%, 75%); /* most muted (codas) */

  /* Warm-noir gradient tints — the dark-ink stops used in the radial/linear
     grounds of the noir sections, mockups and brand strips. Ordered light to
     deep so gradients read consistently. (hsl 22,14%,11% == --color-ink-900.) */
  --color-noir-1: hsl(22, 14%, 22%);      /* lightest stop (top/origin glow) */
  --color-noir-2: hsl(22, 14%, 15%);
  --color-noir-3: hsl(22, 14%, 12%);
  --color-noir-4: hsl(22, 14%, 9%);
  --color-noir-5: hsl(22, 14%, 7%);
  --color-noir-6: hsl(22, 14%, 4%);       /* deepest stop (bottom radial shadow) */

  /* Single signature accent — deep oxblood. */
  --color-accent: hsl(354, 44%, 30%);
  --color-accent-strong: hsl(354, 52%, 22%);
  --color-accent-warm: hsl(354, 52%, 40%);
  --color-accent-soft: hsl(354, 30%, 92%);
  --color-accent-ink: hsl(354, 56%, 18%);

  /* Oxblood as it reads on the noir ground — a brighter scale than the
     paper-surface accents above, so contrast holds on dark sections. Used by
     the noir cluster (eyebrows, buttons, hover glows, quiet-link borders). */
  --color-accent-on-noir: hsl(354, 52%, 68%);      /* light oxblood eyebrow/label */
  --color-accent-noir: hsl(354, 52%, 44%);         /* button / mark fill on noir */
  --color-accent-noir-strong: hsl(354, 52%, 38%);  /* its hover (darker) */
  --color-accent-noir-glow: hsl(354, 52%, 50%);    /* hover border / glow ring */
  --color-accent-noir-line: hsl(354, 52%, 60%);    /* quiet-link hover border */

  /* Antique-brass trim — used for dividers, small marks, ornamentation. */
  --color-brass: hsl(38, 32%, 52%);
  --color-brass-soft: hsl(40, 30%, 78%);
  --color-brass-bright: hsl(40, 46%, 66%); /* luminous brass for marks/seals on noir */

  --color-success: hsl(150, 36%, 30%);
  --color-error: hsl(0, 56%, 38%);
  /* Soft tint surfaces for inline alerts (paired with the readable inks above). */
  --color-success-soft: hsl(150, 30%, 96%);
  --color-error-soft: hsl(354, 30%, 96%);

  /* Admin state palette — status badges & alerts. Each state pairs a light
     tint surface with a readable ink. Defined here so no component hardcodes
     status colours (booking lifecycle + order/promo states map onto these). */
  --state-warn-surface: hsl(40, 70%, 90%);
  --state-warn-surface-soft: hsl(40, 70%, 95%);
  --state-warn-ink: hsl(30, 70%, 28%);
  --state-warn-line: hsl(30, 80%, 50%);
  --state-ok-surface: hsl(150, 50%, 90%);
  --state-ok-ink: var(--color-success);
  --state-info-surface: hsl(210, 60%, 90%);
  --state-info-ink: hsl(210, 50%, 28%);
  --state-danger-surface: hsl(0, 60%, 92%);
  --state-danger-ink: var(--color-error);
  --state-featured-surface: hsl(38, 50%, 88%);
  --state-featured-ink: hsl(38, 60%, 24%);

  /* Semantic aliases — what most components actually reference. */
  --color-bg: var(--color-paper);
  --color-bg-elevated: var(--color-bone);
  --color-bg-deep: var(--color-paper-3);
  --color-fg: var(--color-ink-900);
  --color-fg-soft: var(--color-ink-700);
  --color-muted: var(--color-ink-500);
  --color-border: var(--color-line);

  /* ── Typography ─────────────────────────────────────────────────────────
     Display serif used at editorial sizes; body sans is tightly tracked.
     `--font-script` is used for handwritten flourishes / signatures. */
  --font-display: "Cormorant Garamond", "GT Sectra", "Didot", "Bodoni Moda",
    "Georgia", serif;
  --font-body: "Inter", "Söhne", "Helvetica Neue", system-ui, -apple-system,
    sans-serif;
  --font-script: "Pinyon Script", "Tangerine", "Snell Roundhand", cursive;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.75rem;
  --fs-display: clamp(3.5rem, 11vw, 8.5rem);  /* magazine-size hero h1 */
  --fs-display-sm: clamp(2.25rem, 6vw, 4.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-base: 1.55;
  --lh-loose: 1.8;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-base: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;       /* for editorial eyebrows */

  /* ── Spacing scale (8px base, with editorial breathing room) ──────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 9rem;

  /* ── Radii / shadows / motion ─────────────────────────────────────────── */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px hsla(22, 16%, 6%, 0.04);
  --shadow-2: 0 8px 24px hsla(22, 16%, 6%, 0.08);
  --shadow-3: 0 24px 60px hsla(22, 16%, 6%, 0.16);
  --shadow-inset: inset 0 0 0 1px hsla(22, 16%, 6%, 0.06);

  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 720ms;
  --duration-reveal: 900ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-display: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-precise: cubic-bezier(0.65, 0.05, 0.36, 1);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-pad: clamp(var(--space-4), 4vw, var(--space-7));

  /* Rule weights for editorial dividers. */
  --rule-hair: 1px;
  --rule-medium: 2px;
  --rule-bold: 4px;
}

/* Dark theme — kept as a graceful override for prefers-color-scheme.
   The main brand is light-paper-on-noir; dark theme inverts to noir-on-paper. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --color-bg: var(--color-ink-950);
    --color-bg-elevated: var(--color-ink-900);
    --color-bg-deep: var(--color-ink-800);
    --color-fg: var(--color-paper);
    --color-fg-soft: var(--color-paper-2);
    --color-muted: var(--color-ink-300);
    --color-border: var(--color-ink-800);
    --color-paper: var(--color-ink-950);
    --color-paper-2: var(--color-ink-900);
    --color-paper-3: var(--color-ink-800);
    --color-bone: var(--color-ink-900);
    --color-accent-soft: hsl(354, 28%, 18%);
  }
}