/**
 * ITSVANDARFUL — DESIGN TOKENS
 * Phase 2 Brand & UX Design System is the visual source of truth.
 *
 * ══════════════════════════════════════════════════════════════════════
 *  THIS FILE IS THE ONLY PLACE BRAND VALUES MAY BE DEFINED.
 *  No component may hard-code a font family, colour or radius.
 *  Enforced by lint rule and by /docs/AI_DEVELOPMENT_RULES.md rule 7.
 * ══════════════════════════════════════════════════════════════════════
 *
 * Typography is TEMPORARY (Phase 3 CONFLICT-04). Vanda will introduce her own
 * typeface later. Replacing it means editing --font-display / --font-handwriting
 * here and nowhere else.
 *
 * Colours are sampled from the approved colourful circular logo
 * "IT'S VANDARFULL!". The deprecated monogram palette must never return.
 */

:root {
  /* ── TYPOGRAPHY — temporary, swappable ─────────────────────────────── */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-handwriting: var(--font-display); /* ← Vanda's future typeface lands here */

  /* type scale */
  --text-display: 3rem;      /* hero */
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.125rem;       /* product title */
  --text-body: 1rem;
  --text-small: 0.8125rem;
  --text-micro: 0.7rem;
  --text-button: 0.8125rem;

  --leading-tight: 1.1;
  --leading-normal: 1.6;
  --tracking-button: 0.04em;
  --tracking-label: 0.2em;

  /* ── COLOUR — neutral base ─────────────────────────────────────────── */
  --c-ink: #141210;
  --c-ink-soft: #3b3630;
  --c-muted: #857d73;
  --c-paper: #f7f0e5;
  --c-paper-2: #eadbc5;
  --c-surface: #fffdf8;
  --c-line: #c9b99f;
  --c-line-2: #9f8b6d;

  /* ── COLOUR — playful set, sampled from the colour logo ────────────── */
  --c-petrol: #195e63;
  --c-raspberry: #d14083;
  --c-ochre: #9b7a45;
  --c-olive: #90965a;
  --c-pink: #ff9ecf;
  --c-rose-mist: #e2c0d1;
  --c-sky: #aed7ed;
  --c-mint: #bbf0c2;
  --c-aqua: #80f5e3;
  --c-butter: #ebe084;

  /* ── ROOM STUDIO — independently swappable presentation layers ───── */
  --room-wall-blush: rgba(255, 158, 207, 0.38);
  --room-wall-sage: rgba(187, 240, 194, 0.36);
  --room-commode-walnut: rgba(116, 72, 38, 0.72);
  --room-commode-ebony: rgba(39, 28, 22, 0.8);
  --room-floor-pale: rgba(238, 218, 184, 0.54);
  --room-floor-smoked: rgba(73, 54, 42, 0.64);
  --room-art-paper: #f7f0e5;
  --room-art-rose: #d14083;
  --room-art-blue: #aed7ed;
  --room-art-mint: #bbf0c2;
  --room-art-ink: #195e63;

  /* ── SEMANTIC ROLES ────────────────────────────────────────────────── */
  --c-bg: var(--c-paper);
  --c-fg: var(--c-ink);
  --c-cta-bg: var(--c-ink);          /* luxury restraint: CTAs are ink, not colour */
  --c-cta-fg: #ffffff;
  --c-cta-secondary-bg: var(--c-raspberry);
  --c-focus: var(--c-petrol);
  --c-sold: var(--c-muted);
  --c-success: #4b7a4e;
  --c-warning: #b0603f;
  --c-glass: rgba(255, 250, 241, 0.88);
  --c-glass-strong: rgba(255, 250, 241, 0.96);
  --c-ink-glass: rgba(20, 18, 16, 0.68);
  --c-shadow: rgba(20, 18, 16, 0.18);
  --c-shadow-strong: rgba(20, 18, 16, 0.34);
  --hero-shade: linear-gradient(90deg, rgba(20, 18, 16, 0.48) 0%, rgba(20, 18, 16, 0.08) 44%, rgba(20, 18, 16, 0) 70%);

  /* ── SHAPE ─────────────────────────────────────────────────────────── */
  --radius-sm: 2px;                  /* near-sharp, editorial */
  --radius-lg: 6px;
  --radius-circle: 50%;
  --radius-pill: 999px;              /* reserved for binary switches */
  --border-hairline: 1px solid var(--c-line);
  --frame-pin: 1.5px solid var(--c-ink);   /* pinned-photo product frame */
  --frame-product-card: 2px solid var(--c-ink); /* separated editorial/Instagram-like posts */
  --shadow-soft: 0 6px 14px var(--c-shadow);
  --shadow-editorial: 7px 7px 0 var(--c-ink);
  --shadow-panel: 5px 5px 0 var(--c-ink);

  /* ── SPACING — 4pt base ────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── LAYOUT ────────────────────────────────────────────────────────── */
  --container-max: 1180px;
  --grid-product-columns: 3;         /* fixed across all breakpoints (Phase 2) */
  --gutter: var(--space-4);
  --header-height: 7rem;

  /* ── MOTION ────────────────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-slow: 300ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="night"] {
  color-scheme: dark;
  --c-ink: #f7eadb;
  --c-ink-soft: #dcc7b3;
  --c-muted: #b89e88;
  --c-paper: #2b1a14;
  --c-paper-2: #382219;
  --c-surface: #422a20;
  --c-line: #765745;
  --c-line-2: #a27c62;
  --c-petrol: #8bcfd0;
  --c-raspberry: #ef78ad;
  --c-ochre: #c8a66e;
  --c-olive: #bbc183;
  --c-pink: #ffb1d6;
  --c-rose-mist: #d7a8bd;
  --c-sky: #a9d6ea;
  --c-mint: #b7e5bd;
  --c-aqua: #7de3d5;
  --c-butter: #e5d77d;
  --room-wall-blush: rgba(187, 94, 126, 0.34);
  --room-wall-sage: rgba(91, 121, 83, 0.34);
  --room-commode-walnut: rgba(125, 73, 40, 0.52);
  --room-commode-ebony: rgba(13, 8, 6, 0.72);
  --room-floor-pale: rgba(161, 123, 87, 0.34);
  --room-floor-smoked: rgba(19, 12, 9, 0.62);
  --room-art-paper: #382219;
  --room-art-rose: #ef78ad;
  --room-art-blue: #a9d6ea;
  --room-art-mint: #b7e5bd;
  --room-art-ink: #8bcfd0;
  --c-bg: var(--c-paper);
  --c-fg: var(--c-ink);
  --c-cta-bg: var(--c-ink);
  --c-cta-fg: #2b1a14;
  --c-focus: var(--c-sky);
  --c-sold: var(--c-muted);
  --c-success: #91c196;
  --c-warning: #df9a76;
  --c-glass: rgba(56, 34, 25, 0.9);
  --c-glass-strong: rgba(66, 42, 32, 0.97);
  --c-ink-glass: rgba(247, 234, 219, 0.72);
  --c-shadow: rgba(5, 2, 1, 0.32);
  --c-shadow-strong: rgba(5, 2, 1, 0.58);
  --hero-shade: linear-gradient(90deg, rgba(5, 2, 1, 0.52) 0%, rgba(5, 2, 1, 0.12) 44%, rgba(5, 2, 1, 0) 70%);
}

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

/* ── minimal element defaults ────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion-slow) var(--easing), color var(--motion-slow) var(--easing);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}