/* ============================================================
   TUISA — Design Tokens
   Philosophy: warm gallery minimalism (see .design/tuisa-site/DESIGN_BRIEF.md)
   Palette constraint: coral family + charcoal + white only.

   Sources: Tuisa Identity Guide (July 2025, image-ark) — colors §10
   (white #FFFFFF · coral #F3787D · charcoal #434143 + tint ramp),
   typography §11 (Vinter headings · Work Sans body).

   CONTRAST RULES (WCAG AA, measured):
   · white on coral #F3787D  ≈ 2.7:1 — NEVER for text, any size
   · charcoal on coral       ≈ 3.8:1 — large/display text ONLY
   · charcoal on white       ≈ 10.1:1 — body text default
   · white on charcoal       ≈ 10.1:1 — inverse sections
   Buttons are therefore charcoal-filled and HOVER BY DEEPENING
   (--color-bg-inverse-hover), never by turning coral — button
   labels are small text, and charcoal-on-coral only passes AA at
   display sizes. Coral is the signature in non-text roles:
   markers, link underlines, ghost borders, focus rings, and one
   saturated surface per page.

   v1 ships light-locked. Dark palette exists behind
   [data-theme="dark"] only — no auto prefers-color-scheme switch.

   DELIBERATE OMISSIONS: no status colors (site has no forms or
   system states) and no bold weights above 600 (editorial ceiling).
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Color · backgrounds ---- */
  --color-bg-primary: #FFFFFF;      /* brand primary white (guide 10.1) */
  --color-bg-secondary: #FDE5E1;    /* 10% coral (guide 10.2) — alternating sections */
  --color-bg-tertiary: #F9CDCA;     /* 20% coral (guide 10.2) — wells, placeholder base */
  --color-bg-inverse: #434143;      /* charcoal sections */
  --color-bg-inverse-hover: #2F2D2F; /* button hover — deepen, never colorize (coral fails AA at label size) */
  --color-surface-coral: #F3787D;   /* THE saturated moment — one per page */
  --color-surface-blush: #F9B8B4;   /* 40% coral — pattern/decor, sparingly */

  /* ---- Color · text ---- */
  --color-text-primary: #434143;    /* charcoal — all body text */
  --color-text-secondary: #6E686B;  /* captions, meta */
  --color-text-tertiary: #9B9497;   /* 2.9:1 — decorative/disabled ONLY, never information */
  --color-text-inverse: #FFFFFF;    /* on charcoal */
  --color-text-link: #434143;       /* links are charcoal + coral underline */
  --color-on-coral: #434143;        /* ONLY text color allowed on coral, display-size only */

  /* ---- Color · borders & focus ---- */
  --color-border-primary: #E8E1DD;
  --color-border-secondary: #F1EBE7;
  --color-border-focus: #F3787D;

  /* ---- Color · accent (coral family) ---- */
  --color-accent-primary: #F3787D;
  --color-accent-primary-hover: #E9646B;
  --color-accent-primary-active: #D95A62;
  --color-accent-secondary: #F9B8B4;

  /* ---- Color · surfaces & overlay ---- */
  --color-surface-overlay: rgba(67, 65, 67, 0.4);
  --gradient-scrim-hero: linear-gradient(180deg,
    rgba(40, 38, 40, 0.14) 0%,
    rgba(40, 38, 40, 0.08) 38%,
    rgba(40, 38, 40, 0.42) 68%,
    rgba(40, 38, 40, 0.62) 100%);   /* strengthened at the headline band 1 Aug QA — white display text passes 3:1 over light skin/pink */
  --color-selection-bg: #F9CDCA;    /* text selection — 20% coral, charcoal text */
  --color-selection-text: #434143;

  /* ---- Typography · families ---- */
  --font-family-display: 'Vinter', 'Work Sans', -apple-system, 'Helvetica Neue', sans-serif; /* brand faces live: Vinter woff2 self-hosted */
  --font-family-body: 'Work Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Typography · fluid ramp ---- */
  --font-size-xs: 0.75rem;                              /* 12 — fine print */
  --font-size-sm: 0.8125rem;                            /* 13 — kickers, captions */
  --font-size-base: 1.0625rem;                          /* 17 — body */
  --font-size-md: 1.1875rem;                            /* 19 — lead body */
  --font-size-lg: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);   /* small headings */
  --font-size-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);     /* section subheads */
  --font-size-2xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);  /* section headlines */
  --font-size-3xl: clamp(2.625rem, 1.9rem + 3.4vw, 4.25rem);  /* page headlines */
  --font-size-4xl: clamp(2.75rem, 1.8rem + 5vw, 5.5rem);      /* hero display */

  /* ---- Typography · weights (guide: Vinter Light/Reg/Med · Work Sans Light/Reg/SemiBold) ---- */
  --font-weight-light: 300;    /* large display moments */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600; /* deliberate ceiling — nothing heavier on this site */

  /* ---- Typography · rhythm ---- */
  --line-height-tight: 1.1;    /* display */
  --line-height-normal: 1.5;   /* UI, short copy */
  --line-height-relaxed: 1.7;  /* reading copy */
  --letter-spacing-tight: -0.01em;  /* large display */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.14em;    /* all-caps kickers: HERITAGE, MODERNITY… */
  --letter-spacing-caps: 0.08em;    /* all-caps display (RADIANCE, REDEFINED.) */

  /* ---- Spacing · 8px base, editorial multipliers ---- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;
  --space-section: clamp(96px, 14vh, 160px); /* the whitespace rhythm between sections */

  /* ---- Layout ---- */
  --max-width-content: 42rem;   /* reading measure */
  --max-width-wide: 75rem;      /* tile trios, split sections */
  --max-width-page: 100rem;     /* page ceiling; heroes stay full-bleed */

  --nav-height: 72px;   /* sticky nav; pages set scroll-padding-top to this so #jewellery lands clear */
  --z-nav: 100;
  --z-overlay: 200;
  --z-skip-link: 300;

  /* ---- Photo slot ratios — placeholder and final photo share the slot;
          swapping is a filename change, never a layout change ---- */
  --ratio-tile: 3 / 4;        /* jewellery trio, portrait */
  --ratio-editorial: 4 / 5;   /* split-section images */
  --ratio-process: 1 / 1;     /* IDEA → SKETCH → CRAFT → FINISH */
  --ratio-banner: 21 / 9;     /* closing full-width moments */
  /* heroes are viewport-sized (100svh), not ratio boxes */

  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 999px;

  /* ---- Depth — whisper-soft, warm-tinted, mostly unused ---- */
  --shadow-sm: 0 1px 2px rgba(67, 65, 67, 0.05);
  --shadow-md: 0 4px 16px rgba(67, 65, 67, 0.07);
  --shadow-lg: 0 12px 40px rgba(67, 65, 67, 0.10);
  --shadow-focus: 0 0 0 3px rgba(243, 120, 125, 0.35);

  /* ---- Motion ---- */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;        /* section reveals */
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);  /* reveals settle with this */
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* unused by design; kept for completeness */
  --reveal-distance: 12px;         /* max translate for fade-and-settle */

  /* ---- Breakpoints (reference values — CSS custom properties
          cannot be used inside media queries; keep queries in sync)
     sm 375px · md 768px · lg 1024px · xl 1280px · 2xl 1600px ---- */
}

/* ============================================================
   Dark palette — future-ready, NOT active in v1.
   Activates only via explicit <html data-theme="dark">.
   Warm charcoal, lifted coral, softened text contrast.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-primary: #232124;
  --color-bg-secondary: #2A272B;
  --color-bg-tertiary: #322F33;
  --color-bg-inverse: #FCFAF8;
  --color-bg-inverse-hover: #EDE7E3;
  --color-surface-coral: #E9646B;

  --color-text-primary: #EFEAE7;
  --color-text-secondary: #B5AEB1;
  --color-text-tertiary: #837C80;
  --color-text-inverse: #232124;
  --color-text-link: #EFEAE7;
  --color-on-coral: #232124;

  --color-border-primary: #3E3B3F;
  --color-border-secondary: #332F34;

  --color-accent-primary: #F58F93;
  --color-accent-primary-hover: #F8A5A9;
  --color-accent-primary-active: #F3787D;
  --color-accent-secondary: #C98E92;
  --color-border-focus: #F58F93;
  --color-surface-blush: #7A5357;   /* muted rosewood — blush decor in dark */

  --color-surface-overlay: rgba(0, 0, 0, 0.55);
  --gradient-scrim-hero: linear-gradient(180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.08) 40%,
    rgba(0, 0, 0, 0.6) 100%);
  --color-selection-bg: #5C4145;
  --color-selection-text: #EFEAE7;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Reduced motion — global kill switch for the reveal system.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --reveal-distance: 0px;
  }
}