/* The Breakthrough Protocol, 28 days: design tokens (mockups-28, pass 2, Nov 4 2026).
   Source of truth for the look: OVERHAUL-PLAN-2026-10-29.md section 4, the Oct 23 Look Test v3, the Iris Look
   Book (Oct 14), and her pass 2 brief and two rounds of notes on the contact sheet (Nov 4). Rinascita's rulebook
   applies only where section 4 does not contradict it (square corners, red means do, sentence case, her
   photographs lead). Fonts are the OFL files in ./fonts, plus DelfinaHand (her own handwriting, from the
   Cutting Room brand folder). Load them with @font-face in the page. */

:root {
  /* Pigments, from the Look Book palette and kit.json. Hex only here; every surface uses the roles below. */
  --iris: #5847D6;
  --night-iris: #2B1F73;
  --lilac: #BDB6EC;
  --swan: #ECEAF6;
  --birch: #F4F3F1;
  --white: #FFFFFF;
  --gzhel: #1E3A9E;
  --big-sur: #1F8A8C;
  --sea-glass: #C3E6E1;
  --platinum: #C9CCD6;
  --ink: #16132A;
  --ink-muted: #5A5568;
  --hairline: #C9C6D3;
  --red-pill: #C2264F;
  --tint-iris: #E4E2EE;              /* Iris at 10 percent on Birch (8 to 12 is the range) */
  --card-face-warm: #FBF8F1;         /* the card face: warmer than white */

  /* Roles. Grounds are light everywhere. No dark ground on the platform, page or emails. */
  --ground: var(--birch);            /* every screen, the page, the email shell */
  --ground-raised: var(--white);     /* the Day 28 paper in a Day 1 and Day 28 pair; nothing else is a white box */
  --ground-sheet: var(--swan);       /* the contact sheets only */
  --plate: var(--tint-iris);         /* every plate, option, text area and slot: lavender in place of a white box */
  --field-iris: var(--iris);         /* the card back, the Seal button, the ceremonies, the Mirror interstitials,
                                        and one full-field section on the page (the card tease) */
  --on-iris: var(--birch);           /* type, the sigil and her signature on an Iris field */
  --on-iris-dim: rgba(244,243,241,.78);
  --field-lilac: var(--lilac);       /* the lapse card in Your Deck */
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --rule: var(--hairline);           /* a hairline only where air or a plate cannot do the work */
  --rule-strong: var(--ink);         /* the card's edge, the phone's edge */
  --action: var(--red-pill);         /* every button and imperative link, and only those: red means do */
  --on-action: var(--birch);
  --action-seal: var(--iris);        /* the Seal Day N button stays Iris */
  --action-on-iris: var(--birch);    /* a button on a full Iris field: Birch with Ink type (Red Pill has no contrast there) */
  --progress-on: var(--iris);
  --progress-off: var(--platinum);
  --bar-then: var(--platinum);       /* Day 1 in a before/after pair */
  --bar-now: var(--iris);            /* today */
  --focus: var(--iris);
  --mark: rgba(22,19,42,.7);         /* crop marks: on the card and the story card only, never on a photograph */

  /* Type. Bodoni Moda Black for headlines, Work Sans for body and UI and for every number inside a headline
     (class .num, Semibold, 0.9 em), Xanh Mono for readouts only, DelfinaHand for the three handwritten marks. */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --font-body: "Work Sans", Arial, sans-serif;
  --font-mono: "Xanh Mono", "Courier New", monospace;
  --font-hand: "DelfinaHand", cursive;

  --display-xl: 900 72px/0.92 var(--font-display);
  --display-l: 900 44px/0.95 var(--font-display);    /* a sheet title */
  --display-m: 900 28px/1.02 var(--font-display);
  --display-s: 900 21px/1.1 var(--font-display);
  --display-xs: 900 15px/1.2 var(--font-display);    /* the masthead wordmark, an email masthead */
  --tracking-display: -0.012em;
  --hero-m: 900 46px/0.98 var(--font-display);       /* the page hero, mobile (44 to 52), at most three lines */
  --hero-d: 900 66px/0.96 var(--font-display);       /* the page hero, desktop */
  --deck-22: 400 22px/1.32 var(--font-body);         /* the deck line under the hero */
  --lead-m: 900 25px/1.1 var(--font-display);        /* a section lead, mobile */
  --lead-d: 900 34px/1.06 var(--font-display);       /* a section lead, desktop */
  --h2-m: 900 34px/1.02 var(--font-display);         /* a screen headline */
  --q-m: 900 28px/1.08 var(--font-display);          /* a question */
  --name-xl: 900 88px/0.86 var(--font-display);      /* the pattern's name on the result, one word a line */
  --name-xl-desk: 900 168px/0.84 var(--font-display);
  --cer: 900 92px/0.9 var(--font-display);           /* a ceremony: the largest type on the platform */
  --cer-xl: 900 150px/0.84 var(--font-display);      /* Day 28 */
  --body: 400 15px/1.5 var(--font-body);
  --body-2: 400 17px/1.5 var(--font-body);           /* body, mobile: 17 to 18 px at 1.5, measure 60 to 68 characters */
  --body-2-desk: 400 18px/1.55 var(--font-body);     /* body, desktop */
  --body-s: 400 13px/1.45 var(--font-body);
  --body-strong: 600 15px/1.4 var(--font-body);
  --button: 600 15px/1 var(--font-body);
  --label: 400 11.5px/1.4 var(--font-mono);          /* sheet labels and notes */
  --readout: 400 11px/1.4 var(--font-mono);          /* the readout layer: captions, day and hour, counts; sentence case */
  --data: 400 13px/1.4 var(--font-mono);             /* the six-digit code, a time */

  /* Space and shape. An 8 px scale. Square corners everywhere. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --sec-m: 72px;                     /* section padding, mobile (64 to 96) */
  --sec-d: 120px;                    /* section padding, desktop */
  --radius: 0px;
  --hair: 1px;
  --shadow: none;                    /* nothing casts a shadow on a screen */
  --shadow-object: 0 1px 1px rgba(22,19,42,.10), 0 6px 12px -4px rgba(22,19,42,.20), 0 16px 24px -16px rgba(22,19,42,.24);
                                     /* the one exception: a card photographed as an object (share renders, Your Deck) */

  /* The card. 3:4, one hairline Ink edge. Front: warm paper, a hairline inset frame with corner marks. Back: the
     Iris field, her sigil at 58 percent of the width, her signature beneath it at a third of the sigil, a dashed
     inset frame, the readout at the top and one line at the foot. */
  --card-w: 300px;
  --card-h: 400px;
  --card-edge: var(--hair) solid var(--ink);
  --card-back: var(--iris);
  --card-face: var(--card-face-warm);
  --card-frame: rgba(22,19,42,.2);
  --card-frame-inset: 10px;
  --card-title: 900 30px/1.04 var(--font-display);
  --sigil-on-back: 58%;
  --signature-under-sigil: 33%;      /* of the sigil's width */
  --paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='400'><filter id='p' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .44  0 0 0 0 .37  0 0 0 0 .27  .5 0 0 0 -.16'/></filter><rect width='300' height='400' filter='url(%23p)'/></svg>");
  --paper-surface: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='400'><filter id='p' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 .44  0 0 0 0 .37  0 0 0 0 .27  .42 0 0 0 -.1'/></filter><rect width='300' height='400' filter='url(%23p)'/></svg>");
                                     /* a generated grain. --paper is the card face; --paper-surface stands in for a
                                        photograph of Birch paper under the cards until she shoots one */

  /* The flip, 1.2 s, on the card's vertical axis (rotateY, perspective 1100 px). Frame by frame in README.md. */
  --flip-duration: 1200ms;
  --flip-lift: 1.02;                 /* 0 to 80 ms: the tap lifts the card two percent */
  --flip-settle: 3deg;               /* at 600 ms the card is three degrees past flat, then back */
  --flip-readout-at: 600ms;          /* the corner marks, the meta line and the day of 28 land first */
  --flip-title-at: 760ms;            /* the title second, rising 4 px over 160 ms */
  --flip-rest-at: 960ms;             /* the body, move, week letter, tags and signature together, 200 ms */

  /* The motifs. Her sigil (assets/sigil-delfina.svg) and the mandala trace. Never more than one on a screen. */
  --motif-marker: 44px;              /* a section marker in place of a hairline: 36 to 48 px */
  --motif-ornament: 120px;           /* once on the page, between the Protocol section and the price */

  /* Her signature as the mark: 26 percent of the frame width, 4 percent in from the right and bottom, on every
     ceremony and share render; the same width at the foot of every email; Ink as the page's sign-off; cream on an
     Iris field, Iris on the card, Ink for documents. */
  --signature-corner-width: 26%;
  --signature-inset: 4%;
  --signature-small: 56px;

  /* Layout. Desktop: a label column, a 640 px measure, photographs running off the page edge. */
  --page-max: 1240px;
  --measure: 62ch;
  --margin-outer: 30%;
  --phone-w: 390px;
  --phone-h: 844px;
  --phone-pad: 24px;
}

/* Proportions to hold: Birch leads on every screen. Iris is a whole field only on the card back, the ceremonies,
   the Mirror interstitials and the one card section on the page; elsewhere it is one control or one line. Lavender
   is for plates. Red Pill is the buttons only. Never a dark ground, a gradient, a pill, an icon or an emoji; no
   shadow except under a card photographed as an object. Photographs: hers, full bleed, no marks, a mono caption
   with place and month; one per week-close screen, none on a daily screen. Readouts are quiet everywhere except
   the Mirror and the dashboard. Handwriting three ways only: the week letters, the underline under the hero's key
   phrase, the yes on the Seal ceremony. */