/**
 * HOUSE OF FORM — BRAND TOKENS
 * -----------------------------------------------------------------------
 * Aligned to the final brand guidelines (Femme Brand Social, Aug 2026).
 * Palette and type roles below are CONFIRMED and match the guidelines
 * exactly. See BRAND-UPDATE.md for the two remaining swaps (licensed
 * fonts, vector logo files).
 *
 * No component file should ever reference a raw hex value or a raw font
 * name — everything routes through these custom properties so the whole
 * site can be re-skinned from this one file.
 * -----------------------------------------------------------------------
 */

:root {
  /* ---- COLOR ------------------------------------------------------
     Primary:   Blank Page / Quiet Linen / Considered Clay
     Secondary: Long-Term / Point of View
     Accent:    Quiet Burgundy                                        */
  --brand-background: #F6F3EE; /* Blank Page */
  --brand-linen:      #D8D2C8; /* Quiet Linen */
  --brand-clay:       #B6AB9A; /* Considered Clay */
  --brand-brown:      #362017; /* Fudge (replaced Long-Term #4A4037, Aug 2026) */
  --brand-black:      #1F1F1F; /* Point of View */
  --brand-burgundy:   #4C0000; /* Quiet Burgundy — use sparingly */

  --brand-background-rgb: 246, 243, 238;
  --brand-black-rgb: 31, 31, 31;
  --brand-burgundy-rgb: 76, 0, 0;

  /* Functional aliases — components should use these, not the raw
     palette names above, so future rebrands never require touching
     component CSS. */
  --surface-primary: var(--brand-background);
  --surface-secondary: var(--brand-linen);
  --surface-tertiary: var(--brand-clay);
  --text-primary: var(--brand-black);
  --text-secondary: var(--brand-brown);
  --text-on-dark: var(--brand-background);
  --accent: var(--brand-burgundy);
  --border-hairline: rgba(31, 31, 31, 0.14);
  --border-hairline-strong: rgba(31, 31, 31, 0.26);

  /* ---- TYPOGRAPHY --------------------------------------------------
     CONFIRMED per brand guidelines:
       Headings            → Canela
       Editorial / italic  → Canela Serif Italic
       Body                → Haas Grotesk

     These are licensed typefaces and are NOT bundled here. (The deck
     itself was set in "Canela Trial" / "Haas Grot Text Trial" — trial
     licences do not permit web embedding, so a production licence is
     required before launch.) Fraunces and Inter stand in until then:
     Fraunces is a high-contrast serif with a true italic optical
     family, Inter a neutral grotesk — the closest freely-licensed
     matches in character. Swap the <link> in each page head and these
     three variables; nothing else changes. */
  --font-display: "Fraunces", "Canela", Georgia, "Times New Roman", serif;
  --font-editorial: "Fraunces Italic", "Fraunces", "Canela Serif Italic", Georgia, serif;
  --font-body: "Inter", "Haas Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --display-weight: 400;
  --display-weight-medium: 500;
  --body-weight: 400;
  --body-weight-medium: 500;

  /* Fluid type scale */
  --text-eyebrow: 0.8125rem;
  --text-body: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --text-body-lg: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --text-h4: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-h3: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --text-h2: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
  --text-h1: clamp(2.75rem, 1.9rem + 3.8vw, 6.25rem);

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* ---- SPACING ------------------------------------------------------ */
  --spacing-section: clamp(5rem, 4rem + 5vw, 9rem);
  --spacing-section-sm: clamp(3rem, 2.5rem + 2.5vw, 5rem);
  --spacing-container: clamp(1.5rem, 1rem + 2.5vw, 4.5rem);
  --container-max: 1400px;
  --container-max-narrow: 860px;

  /* ---- SHAPE / BORDERS ------------------------------------------- */
  --radius-none: 0;
  --radius-button: 2px;
  --border-width: 1px;

  /* ---- MOTION ------------------------------------------------------ */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 240ms;
  --duration-medium: 560ms;
  --duration-slow: 900ms;
}

@media (prefers-color-scheme: dark) {
  /* Intentionally not implementing a dark theme for v1 — House of Form's
     identity is a warm-neutral editorial palette regardless of system
     preference. Placeholder left here for future art direction. */
}