/* Web Faery design tokens: the twilight look (Oct 14 2026).
   One small sheet that every Web Faery page and back end loads first, so they all draw from the same colors,
   type, sizes, radii, shadows and motion. Tokens only: nothing here styles an element by itself.
   Load order on a page: fonts/fonts.css, then wf-tokens.css, then the page's own sheet.
     public pages (index, quiz, intake, welcome, domain, texts, 404): the twilight field and the cream cards
     back ends (portal, my/ door, start, book, the Studio): the light mist and paper, with an optional dark twilight
   Where this sheet can't load (mark.js on clients' own sites, the hub's server-made pages, emails), copy the values
   from here and say so in a comment, so a later change can find them.
   Reserved names: the hub's embeds already use --wf-book-*, --wf-gift-*, --wf-waiver-*, --wf-news-* and --wf-ig-*
   on clients' sites. Don't add tokens that start with those.

   The colors come from the paintings: twilight blue #41578e, lavender #948bcc, pink #eea5b6, lantern gold #f6c56f.
   The darkest color anywhere is the blue-violet ground #272c66: no black, on any page, in either mode.
   Contrast (WCAG, checked Oct 14):
     twilight: ink #f7f3ff on ground 11.7:1, soft #e6e0f8 on the field's lightest stop 7.6:1, eyebrow #fcd0e0 7.1:1,
       blush #f7b6cf on ground 7.7:1 (5.8:1 on the lightest field stop), link gold #ffd27a 6.8:1 or more.
     cream cards: ink #262a5e 11.5:1, rose #973263 6.1:1, link #3c4a96 6.6:1, gold words #7a4f0e 5.8:1.
     gold button: words #2c2160 on #f6c56f 8.8:1.
     back end, light: ink on paper 12.9:1, ink on mist 11.4:1, soft 7.5:1 (6.3:1 on the well), link 7.8:1,
       done 6.0:1, trouble 5.8:1, accent 6.1:1, gold words 6.9:1 (6.3:1 on the gold tint), input edge 3.3:1.
     back end, dark: ink on sheet 10.0:1, soft 7.6:1, link 7.0:1, done 6.2:1, trouble 5.5:1, accent 6.6:1,
       gold 6.9:1, gold words on the gold tint 6.2:1, input edge 3.5:1.

   Breakpoints (media queries can't read custom properties, so they live here as a note):
     320 smallest checked, 560 phones, 760 back-end dock, 860 narrow tablets, 1080 laptops, 1440 widest checked;
     (max-aspect-ratio: 3/4) is the tall phone hero. */

:root {
  /* ---------- the palette ---------- */
  --wf-ground: #272c66;              /* the deepest color: blue-violet */
  --wf-ground-rgb: 39 44 102;        /* for rgb(var(--wf-ground-rgb) / .5): every veil and fade ends in exactly the ground */
  --wf-dusk: #30347a;
  --wf-twilight: #41578e;
  --wf-lavender: #948bcc;
  --wf-lilac: #c9bfe8;
  --wf-pink: #eea5b6;
  --wf-blush: #f7b6cf;
  --wf-gold: #f6c56f;                /* lantern gold: the main button, and "needs you" in the back ends */
  --wf-gold-hi: #ffe0a0;             /* focus ring and small gold words on the twilight */
  --wf-gold-top: #fbd68a;
  --wf-gold-low: #f0b459;
  --wf-gold-edge: #e9ae4c;
  --wf-night: #2e3271;               /* the back ends' bar and phone dock */

  /* ---------- public pages: words on the twilight ---------- */
  --wf-ink: #f7f3ff;
  --wf-ink-soft: #e6e0f8;
  --wf-eyebrow: #fcd0e0;
  --wf-hero-eyebrow: #ffe4ee;
  --wf-hero-lede: #fbf8ff;
  --wf-link: #ffd27a;
  --wf-on-gold: #2c2160;
  /* The italic words on the twilight (hero line 2, heading italics, "Faery" in the wordmark).
     The approved Oct 12 screenshots show them white; set this to var(--wf-blush) for pink. */
  --wf-italic: var(--wf-ink);
  --wf-shade: rgb(22 20 66 / .7);    /* shadows are indigo, not black */
  --wf-text-shadow: 0 2px 18px rgb(28 24 78 / .5);
  --wf-text-shadow-strong: 0 2px 22px rgb(28 24 78 / .75);

  /* the header and banner over the hero */
  --wf-head-solid: rgb(41 45 104 / .86);
  --wf-head-fade: linear-gradient(180deg, rgb(var(--wf-ground-rgb) / .7), rgb(var(--wf-ground-rgb) / .3) 55%, rgb(var(--wf-ground-rgb) / 0));
  --wf-banner-bg: rgb(32 36 92 / .55);
  --wf-banner-line: rgb(255 224 160 / .16);

  /* the twilight field: one long calm gradient, two soft glows per section, and faint stars */
  --wf-field: linear-gradient(180deg, var(--wf-ground) 0%, #2f3376 9%, #353880 22%, #3a3b87 38%, #33367d 52%, #3b3a87 66%, #36377f 82%, var(--wf-ground) 100%);
  --wf-foot: linear-gradient(180deg, var(--wf-ground), #2d2c6c);
  --wf-glow-lavender: rgb(148 139 204 / .26);
  --wf-glow-pink: rgb(238 165 182 / .1);
  /* the stars: tiny dots on two tiles of odd sizes, so they read as scattered, not as rows. Use as a background
     layer of its own (it already carries each layer's size), on a ::before so it can fade in under the hero. */
  --wf-stars:
    radial-gradient(circle at 335px 158px, rgb(255 246 222 / .53) 0 1px, transparent 1.8px) 0 0 / 613px 547px,
    radial-gradient(circle at 78px 100px, rgb(224 214 255 / .51) 0 .9px, transparent 1.7px) 0 0 / 613px 547px,
    radial-gradient(circle at 523px 223px, rgb(250 196 218 / .37) 0 .7px, transparent 1.5px) 0 0 / 613px 547px,
    radial-gradient(circle at 432px 75px, rgb(255 255 255 / .37) 0 .8px, transparent 1.6px) 0 0 / 613px 547px,
    radial-gradient(circle at 438px 64px, rgb(255 246 222 / .38) 0 1.1px, transparent 1.9px) 0 0 / 613px 547px,
    radial-gradient(circle at 232px 67px, rgb(224 214 255 / .51) 0 1.1px, transparent 1.9px) 0 0 / 613px 547px,
    radial-gradient(circle at 54px 230px, rgb(250 196 218 / .5) 0 .7px, transparent 1.5px) 0 0 / 613px 547px,
    radial-gradient(circle at 140px 300px, rgb(255 255 255 / .39) 0 1px, transparent 1.8px) 0 0 / 613px 547px,
    radial-gradient(circle at 124px 319px, rgb(255 246 222 / .57) 0 1.1px, transparent 1.9px) 0 0 / 613px 547px,
    radial-gradient(circle at 189px 109px, rgb(224 214 255 / .5) 0 1.1px, transparent 1.9px) 0 0 / 613px 547px,
    radial-gradient(circle at 196px 385px, rgb(250 196 218 / .5) 0 .7px, transparent 1.5px) 0 0 / 613px 547px,
    radial-gradient(circle at 68px 581px, rgb(255 246 222 / .45) 0 .7px, transparent 1.5px) 0 0 / 887px 761px,
    radial-gradient(circle at 512px 700px, rgb(224 214 255 / .41) 0 1.1px, transparent 1.9px) 0 0 / 887px 761px,
    radial-gradient(circle at 325px 480px, rgb(250 196 218 / .53) 0 1.1px, transparent 1.9px) 0 0 / 887px 761px,
    radial-gradient(circle at 374px 310px, rgb(255 255 255 / .5) 0 .8px, transparent 1.6px) 0 0 / 887px 761px,
    radial-gradient(circle at 719px 253px, rgb(255 246 222 / .44) 0 .7px, transparent 1.5px) 0 0 / 887px 761px,
    radial-gradient(circle at 541px 510px, rgb(224 214 255 / .48) 0 .9px, transparent 1.7px) 0 0 / 887px 761px,
    radial-gradient(circle at 298px 627px, rgb(250 196 218 / .33) 0 .7px, transparent 1.5px) 0 0 / 887px 761px,
    radial-gradient(circle at 432px 172px, rgb(255 255 255 / .34) 0 .9px, transparent 1.7px) 0 0 / 887px 761px,
    radial-gradient(circle at 504px 435px, rgb(255 246 222 / .54) 0 .7px, transparent 1.5px) 0 0 / 887px 761px;

  /* ---------- public pages: the lavender-cream cards ---------- */
  --wf-cream: #f6f2fd;
  --wf-cream-mid: #f1ecfa;
  --wf-cream-2: #ece5f8;
  --wf-card-bg: linear-gradient(170deg, var(--wf-cream) 0%, var(--wf-cream-mid) 52%, var(--wf-cream-2) 100%);
  --wf-c-ink: #262a5e;               /* headings on cream */
  --wf-c-text: #34366e;              /* reading words on cream */
  --wf-c-soft: #4a4c80;
  --wf-c-rose: #973263;              /* italic words and small capitals on cream */
  --wf-c-gold: #7a4f0e;              /* gold words on cream */
  --wf-c-link: #3c4a96;
  --wf-c-rule: rgb(84 72 160 / .18);
  --wf-c-ghost-edge: #6d6aa8;        /* the outline button on a card */
  --wf-money-bg: linear-gradient(170deg, #e9e1f7, #e2d9f3);
  --wf-money-edge: rgb(201 138 36 / .28);
  --wf-founding-bg: rgb(246 197 111 / .26);
  --wf-founding-edge: rgb(201 138 36 / .38);
  --wf-bullet: linear-gradient(135deg, #f8cf7c, #dc9a2e);   /* the small gold diamond */
  --wf-bullet-glow: 0 0 6px 1px rgb(236 170 70 / .45);
  --wf-step-num: radial-gradient(circle at 40% 35%, #fff0c6, var(--wf-gold) 70%);
  /* the little browser and phone frames around the work screenshots */
  --wf-frame: #fbf9ff;
  --wf-frame-bar: #e4ddf4;
  --wf-frame-url: #f8f5ff;
  --wf-frame-dot: #c2b8e3;
  --wf-frame-ink: #3b3a6e;
  /* the slow light that travels around a card's edge, and its glints */
  --wf-shimmer:
    linear-gradient(105deg, transparent 0%, transparent 40%, rgb(255 216 140 / .95) 47%, rgb(247 168 200 / .95) 51%, rgb(190 176 240 / .8) 55%, transparent 62%, transparent 100%) 0 0 / 320% 100% no-repeat,
    linear-gradient(160deg, rgb(255 236 196 / .9), rgb(214 200 246 / .7) 45%, rgb(247 190 214 / .8));

  /* ---------- buttons (the same lantern gold everywhere) ---------- */
  --wf-btn-bg: linear-gradient(180deg, var(--wf-gold-top), var(--wf-gold) 60%, var(--wf-gold-low));
  --wf-btn-edge: var(--wf-gold-edge);
  --wf-btn-ink: var(--wf-on-gold);
  --wf-ghost-bg: rgb(var(--wf-ground-rgb) / .42);   /* the moonlit outline button on the twilight */
  --wf-ghost-edge: rgb(247 243 255 / .72);

  /* ---------- back ends: light (the default) ----------
     Color only with meaning: gold = needs you, teal = done, red = trouble. Twilight blue for links, labels and the
     current tab. Everything else stays ink on paper. */
  --wf-b-bg: #efebf8;                /* lavender mist */
  --wf-b-bg-glow:
    radial-gradient(70% 40% at 15% 0%, rgb(214 205 240 / .9), transparent 70%),
    radial-gradient(50% 30% at 100% 0%, rgb(247 214 232 / .75), transparent 70%);
  --wf-b-sheet: #fcfbff;             /* paper: sheets and ledger rows */
  --wf-b-well: #ebe6f6;              /* sunken places: sub-tabs, thumbnails */
  --wf-b-field: #ffffff;             /* inputs */
  --wf-b-rule: #ddd6ee;
  --wf-b-edge: #8c86b4;              /* input borders */
  --wf-b-ink: #262a5e;
  --wf-b-ink-soft: #4d4f7c;
  --wf-b-link: #3c4a96;
  --wf-b-accent: #a33a6a;            /* italic words in headings */
  --wf-b-done: #2b6a6c;
  --wf-b-due: var(--wf-gold);
  --wf-b-due-edge: #e0a94e;
  --wf-b-due-tint: #fcf0d6;
  --wf-b-due-ink: #7a4f0e;           /* gold words */
  --wf-b-trouble: #b03a3a;
  --wf-b-leaf: #8f86cc;              /* decoration only */
  --wf-b-leaf-tint: #e7e2f6;
  --wf-b-bar: var(--wf-night);
  --wf-b-bar-ink: #f3efff;
  --wf-b-bar-gold: var(--wf-gold-hi);
  --wf-b-focus: #3c4a96;
  --wf-b-note-bg: linear-gradient(135deg, #fcfbff, #f6eef8);
  --wf-b-scrim: rgb(38 42 94 / .35);
  --wf-b-shadow: 0 1px 2px rgb(38 42 94 / .07), 0 8px 26px -12px rgb(38 42 94 / .28);
  /* the painted strip across the top: the hero painting under a twilight veil */
  --wf-b-strip-veil: linear-gradient(180deg, rgb(var(--wf-ground-rgb) / .55), rgb(var(--wf-ground-rgb) / .6) 45%, rgb(var(--wf-ground-rgb) / .74) 72%, rgb(var(--wf-ground-rgb) / .8));

  /* ---------- type ---------- */
  --wf-font-display: 'Gloock', Georgia, serif;                                   /* names, headings, prices, buttons */
  --wf-font-read: 'Spectral', Georgia, 'Times New Roman', serif;                  /* public pages' reading words, italics */
  --wf-font-work: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;     /* back ends: everything read and typed */
  --wf-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --wf-text: 19px;                   /* public body (18px under 760) */
  --wf-text-sm: 18px;
  --wf-line: 1.6;
  --wf-h1: clamp(46px, 5.8vw, 86px);
  --wf-h1-phone: clamp(40px, 11vw, 50px);
  --wf-h2: clamp(34px, 4.4vw, 56px);
  --wf-lede: clamp(19px, 1.6vw, 21px);
  --wf-eyebrow-size: 13.5px;
  --wf-eyebrow-track: .2em;
  --wf-b-text: 16.5px;               /* back-end body (16px under 760) */
  --wf-b-text-sm: 16px;
  --wf-b-line: 1.55;
  --wf-b-h1: clamp(32px, 4.2vw, 44px);
  --wf-b-kicker-size: 12.5px;

  /* ---------- space and layout ---------- */
  --wf-gut: clamp(16px, 4vw, 48px);
  --wf-b-gut: clamp(16px, 4vw, 40px);
  --wf-wrap: 1240px;
  --wf-b-wrap: 880px;
  --wf-b-top-wrap: 1080px;
  --wf-head-h: 96px;                 /* banner 36 + bar 60 */
  --wf-banner-h: 36px;
  --wf-bar-h: 60px;
  --wf-section-pad: clamp(64px, 7.5vw, 104px);
  --wf-tap: 44px;                    /* smallest tap target */

  /* ---------- radii ---------- */
  --wf-r-card: 24px;                 /* 22px under 760 */
  --wf-r-sheet: 18px;                /* question cards, the money box, back-end sheets */
  --wf-r-line: 16px;                 /* the founding line */
  --wf-r-panel: 26px;                /* the lantern path panel */
  --wf-r-frame: 14px;
  --wf-r-input: 10px;
  --wf-r-pill: 999px;                /* buttons only; the Studio has no pill clusters */

  /* ---------- shadows (indigo, not black) ---------- */
  --wf-shadow-card: 0 26px 60px -30px rgb(18 16 60 / .9), 0 0 0 1px rgb(255 255 255 / .06), 0 0 46px -14px rgb(247 182 207 / .35);
  --wf-shadow-btn: inset 0 1px 0 rgb(255 255 255 / .55), 0 8px 26px -8px rgb(246 197 111 / .75);
  --wf-shadow-btn-hover: inset 0 1px 0 rgb(255 255 255 / .55), 0 10px 34px -6px rgb(255 214 140 / .95);
  --wf-shadow-btn-card: inset 0 1px 0 rgb(255 255 255 / .55), 0 8px 20px -10px rgb(201 138 36 / .7);
  --wf-shadow-panel: 0 30px 70px -30px rgb(18 16 60 / .95), 0 0 0 1px rgb(255 224 160 / .28), 0 0 60px -12px rgb(246 197 111 / .28);
  --wf-shadow-frame: 0 20px 44px -24px rgb(38 42 94 / .7);

  /* ---------- motion (every page also stills these under prefers-reduced-motion) ---------- */
  --wf-ease-rise: cubic-bezier(.22, .7, .22, 1);
  --wf-ease-settle: cubic-bezier(.2, .6, .2, 1);
  --wf-dur-rise: 1.8s;               /* each hero line fades up softly */
  --wf-dur-settle: 3s;               /* the painting settles after the door */
  --wf-dur-shimmer: 11s;             /* the light around a card's edge */
  --wf-dur-quick: .25s;              /* hovers */

  /* ---------- the melt: soft fades between a painting and the twilight ----------
     Eased (smootherstep) so there is no visible start or end to a fade. Use the mask on the painting itself, as
     the bottom band of a two-layer mask, so the painting thins out to the ground under it:
       mask: linear-gradient(#000, #000) top / 100% calc(100% - H + 2px) no-repeat, var(--wf-melt-mask) bottom / 100% H no-repeat;
     and the ramp as an overlay that ends in exactly the ground color. The -up versions run the other way. */
  --wf-melt: clamp(120px, 18vh, 220px);   /* how far the hero painting runs on under the top of the twilight */
  --wf-melt-mask: linear-gradient(180deg, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / .993) 9.1%, rgb(0 0 0 / .955) 18.2%, rgb(0 0 0 / .871) 27.3%, rgb(0 0 0 / .743) 36.4%, rgb(0 0 0 / .585) 45.5%, rgb(0 0 0 / .415) 54.5%, rgb(0 0 0 / .257) 63.6%, rgb(0 0 0 / .129) 72.7%, rgb(0 0 0 / .045) 81.8%, rgb(0 0 0 / .007) 90.9%, rgb(0 0 0 / 0) 100%);
  --wf-melt-mask-up: linear-gradient(0deg, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / .993) 9.1%, rgb(0 0 0 / .955) 18.2%, rgb(0 0 0 / .871) 27.3%, rgb(0 0 0 / .743) 36.4%, rgb(0 0 0 / .585) 45.5%, rgb(0 0 0 / .415) 54.5%, rgb(0 0 0 / .257) 63.6%, rgb(0 0 0 / .129) 72.7%, rgb(0 0 0 / .045) 81.8%, rgb(0 0 0 / .007) 90.9%, rgb(0 0 0 / 0) 100%);
  --wf-melt-ramp: linear-gradient(180deg, rgb(var(--wf-ground-rgb) / 0) 0%, rgb(var(--wf-ground-rgb) / .007) 9.1%, rgb(var(--wf-ground-rgb) / .045) 18.2%, rgb(var(--wf-ground-rgb) / .129) 27.3%, rgb(var(--wf-ground-rgb) / .257) 36.4%, rgb(var(--wf-ground-rgb) / .415) 45.5%, rgb(var(--wf-ground-rgb) / .585) 54.5%, rgb(var(--wf-ground-rgb) / .743) 63.6%, rgb(var(--wf-ground-rgb) / .871) 72.7%, rgb(var(--wf-ground-rgb) / .955) 81.8%, rgb(var(--wf-ground-rgb) / .993) 90.9%, rgb(var(--wf-ground-rgb) / 1) 100%);
  --wf-melt-ramp-up: linear-gradient(0deg, rgb(var(--wf-ground-rgb) / 0) 0%, rgb(var(--wf-ground-rgb) / .007) 9.1%, rgb(var(--wf-ground-rgb) / .045) 18.2%, rgb(var(--wf-ground-rgb) / .129) 27.3%, rgb(var(--wf-ground-rgb) / .257) 36.4%, rgb(var(--wf-ground-rgb) / .415) 45.5%, rgb(var(--wf-ground-rgb) / .585) 54.5%, rgb(var(--wf-ground-rgb) / .743) 63.6%, rgb(var(--wf-ground-rgb) / .871) 72.7%, rgb(var(--wf-ground-rgb) / .955) 81.8%, rgb(var(--wf-ground-rgb) / .993) 90.9%, rgb(var(--wf-ground-rgb) / 1) 100%);
}

/* ---------- back ends: the dark twilight (only where a page asks for it) ----------
   A back end that should follow the device's dark setting puts data-wf-dark="auto" on its <html>.
   data-wf-theme="dark" or "light" on <html> forces one (for a page's own switch). Pages without either stay light.
   Same meanings as the light look; the ground is the twilight, not black. */
@media (prefers-color-scheme: dark) {
  :root[data-wf-dark="auto"]:not([data-wf-theme="light"]) {
    color-scheme: dark;
    --wf-b-bg: #272c66;
    --wf-b-bg-glow:
      radial-gradient(70% 40% at 15% 0%, rgb(148 139 204 / .22), transparent 70%),
      radial-gradient(50% 30% at 100% 0%, rgb(238 165 182 / .12), transparent 70%);
    --wf-b-sheet: #30357a;
    --wf-b-well: #2b306f;
    --wf-b-field: #2b306f;
    --wf-b-rule: #474c8f;
    --wf-b-edge: #8f8ad0;
    --wf-b-ink: #f7f3ff;
    --wf-b-ink-soft: #d9d3f0;
    --wf-b-link: #c3cbff;
    --wf-b-accent: #f7b6cf;
    --wf-b-done: #86d0c8;
    --wf-b-due-edge: #e9ae4c;
    --wf-b-due-tint: rgb(246 197 111 / .16);
    --wf-b-due-ink: #ffe0a0;
    --wf-b-trouble: #ff9e94;
    --wf-b-leaf: #948bcc;
    --wf-b-leaf-tint: #3a3f86;
    --wf-b-focus: #ffe0a0;
    --wf-b-note-bg: linear-gradient(135deg, #30357a, #3a3580);
    --wf-b-scrim: rgb(22 20 66 / .55);
    --wf-b-shadow: 0 1px 2px rgb(22 20 66 / .3), 0 10px 28px -14px rgb(22 20 66 / .8);
  }
}
:root[data-wf-theme="dark"] {
  color-scheme: dark;
  --wf-b-bg: #272c66;
  --wf-b-bg-glow:
    radial-gradient(70% 40% at 15% 0%, rgb(148 139 204 / .22), transparent 70%),
    radial-gradient(50% 30% at 100% 0%, rgb(238 165 182 / .12), transparent 70%);
  --wf-b-sheet: #30357a;
  --wf-b-well: #2b306f;
  --wf-b-field: #2b306f;
  --wf-b-rule: #474c8f;
  --wf-b-edge: #8f8ad0;
  --wf-b-ink: #f7f3ff;
  --wf-b-ink-soft: #d9d3f0;
  --wf-b-link: #c3cbff;
  --wf-b-accent: #f7b6cf;
  --wf-b-done: #86d0c8;
  --wf-b-due-edge: #e9ae4c;
  --wf-b-due-tint: rgb(246 197 111 / .16);
  --wf-b-due-ink: #ffe0a0;
  --wf-b-trouble: #ff9e94;
  --wf-b-leaf: #948bcc;
  --wf-b-leaf-tint: #3a3f86;
  --wf-b-focus: #ffe0a0;
  --wf-b-note-bg: linear-gradient(135deg, #30357a, #3a3580);
  --wf-b-scrim: rgb(22 20 66 / .55);
  --wf-b-shadow: 0 1px 2px rgb(22 20 66 / .3), 0 10px 28px -14px rgb(22 20 66 / .8);
}