/* ═══════════════════════════════════════════════════════════════════════
   Their Own Story — Shared Design System ("Storybook Studio")
   See /DESIGN.md for the full design spec.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
  /* Primary */
  --coral:     #E8705F;
  --coral-dk:  #d0564a;
  --coral-lt:  #fdf3f0;
  /* REV-SESSION32-J2#7 + #1299 (WCAG AA): --coral (#E8705F) fails 4.5:1
     in BOTH directions — 3.04:1 on white AND 3.04:1 for white text on a
     --coral fill. --coral-text is the darker AA-safe cousin: use it for
     links + in-body text AND as the BACKGROUND of any white-text fill
     (buttons, chips, badges). Reserve raw --coral strictly for
     text-free decorative composition (dots, rules, focus rings,
     gradients) where no contrast pairing exists. */
  --coral-text: #B8402F;    /* 5.51:1 on white, white-on-#B8402F 5.51:1 */
  /* Neutrals */
  --slate:     #2C2825;
  --slate-md:  #4a4540;
  --muted:     #665c54;        /* WCAG AA 4.5:1 on cream */
  --bg:        #F7F2EA;
  --white:     #FEFCF7;
  --border:    #E0D8CC;
  /* Storybook accents */
  --gold:      #D4924A;
  --green:     #5A9E72;
  --blue:      #82A8C8;
  --violet:    #AA82C8;
  /* Radii */
  --radius:    20px;
  --radius-sm: 12px;
  /* Watercolour washes */
  --wash-peach:    rgba(232, 148, 100, 0.18);
  --wash-sky:      rgba(130, 175, 210, 0.18);
  --wash-sage:     rgba(140, 185, 150, 0.18);
  --wash-lavender: rgba(185, 155, 210, 0.16);
  --wash-gold:     rgba(212, 178, 90, 0.16);
}

/* ── Base typography ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--slate);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Lora', Georgia, serif; }

/* ── Focus-visible ring (accessibility) ─────────────────────────────── */
*:focus-visible {
  outline: 2.5px solid var(--coral);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Paper grain texture ────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.038;
}

/* ── Watercolour wash (organic edges via SVG turbulence filter) ──────── */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 88% 8%,   rgba(232,148,100,0.16) 0%, transparent 50%),
    radial-gradient(ellipse 55% 65% at 6%  78%,   rgba(130,168,200,0.13) 0%, transparent 48%),
    radial-gradient(ellipse 45% 45% at 50% 95%,   rgba(140,185,150,0.10) 0%, transparent 45%),
    radial-gradient(ellipse 30% 35% at 75% 55%,   rgba(212,146,74,0.07)  0%, transparent 40%);
  filter: url(#watercolor-warp);
}

/* ── Brushstroke strip (replaces gradient strip) ────────────────────── */
.gradient-strip {
  height: 8px; position: relative; z-index: 11;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='8' viewBox='0 0 1200 8'%3E%3Cpath d='M0 4c80-2 160 3 280 2s200-4 320-1 180 3 300 1 180-3 300-2' fill='none' stroke='%23E8705F' stroke-width='6' stroke-linecap='round' opacity='0.7'/%3E%3Cpath d='M0 5c100 1 200-2 350-1s220 3 380 1 200-2 470-1' fill='none' stroke='%23D4924A' stroke-width='3' stroke-linecap='round' opacity='0.35'/%3E%3C/svg%3E") repeat-x center/auto 100%;
}

/* ── Common nav ─────────────────────────────────────────────────────── */
nav {
  background: rgba(254,252,247,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 10;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; max-width: 1080px; margin: 0 auto; padding: 0 28px;
}
.nav-logo {
  font-family: 'Fraunces', 'Lora', Georgia, serif;
  font-size: 20px; font-weight: 800; text-decoration: none;
  color: var(--coral); letter-spacing: -0.3px;
}
.nav-logo span { color: var(--slate); }
.nav-back {
  font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s;
}
.nav-back:hover { color: var(--slate); }

/* ── Common buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 26px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: none; text-decoration: none;
  transition: all .16s;
}
.btn:active { transform: scale(0.97); }
/* F2 (#1206): .btn-primary previously used --coral (#E8705F) as the
   fill colour. White-on-#E8705F is 2.96:1 — well below WCAG AA 4.5:1
   for normal text and below 3:1 even for large/UI text. Bump to
   --coral-text (#B8402F = 5.58:1 on white) so the primary CTA passes
   AA. The --coral accent stays reserved for decorative composition
   (focus ring, gradient strip, logo, link hover) where white-on-coral
   is not the load-bearing contrast pair. */
.btn-primary { background: var(--coral-text); color: #fff; box-shadow: 0 4px 16px rgba(184,64,47,.28); }
.btn-primary:hover:not(:disabled) { background: var(--coral-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(184,64,47,.38); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-ghost { background: transparent; color: var(--slate); border: 1.5px solid var(--border); }
.btn-ghost:hover { background: var(--bg); border-color: #aaa; }

/* ── Shared link style ──────────────────────────────────────────────── */
/* REV-SESSION32-J2#7 WCAG AA — link colour must pass 4.5:1 for body
   text. --coral fails (2.96:1 on white); --coral-text (5.58:1) passes. */
a { color: var(--coral-text); }
a:hover { color: var(--coral-dk); }

/* ── SVG watercolor filter (injected via shared.js or inline) ───────── */
/* Each page should include the SVG filter element:
   <svg style="position:absolute;width:0;height:0" aria-hidden="true">
     <defs>
       <filter id="watercolor-warp" x="-10%" y="-10%" width="120%" height="120%">
         <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="3" result="noise"/>
         <feDisplacementMap in="SourceGraphic" in2="noise" scale="90" xChannelSelector="R" yChannelSelector="G"/>
       </filter>
     </defs>
   </svg>
*/

/* ───────────────────────────────────────────────────────────────────────
   Codex P2 (#368) — utility classes for the CSP phase-2 migration.
   Each class corresponds to a high-frequency inline-style token (see
   scripts/inventory-inline-styles.js + scripts/migrate-inline-styles.js).

   Phase 2b: applied 2026-04-28 across visual tokens with no JS
   interaction (text colour, font-size, font-weight, text-align,
   width:100%, cursor:pointer). Renaming any class here requires
   updating scripts/migrate-inline-styles.js's TOKEN_MAP + re-running
   the migration over the production HTML.

   Phase 2c will add `.hidden` and migrate the matching JS to use
   classList.contains('hidden') so the el.style.display reads in
   app.html (5 sites) don't break.
   ─────────────────────────────────────────────────────────────────── */
.text-muted     { color: var(--muted); }
.text-coral     { color: var(--coral); }
.text-slate     { color: var(--slate); }
.text-xs        { font-size: 12px; }
.text-sm        { font-size: 13px; }
.text-base      { font-size: 14px; }
.font-medium    { font-weight: 600; }
.font-bold      { font-weight: 700; }
.text-center    { text-align: center; }
.w-full         { width: 100%; }
.cursor-pointer { cursor: pointer; }