/* ============================================================
   TOKENS — every colour, font and size lives here.
   Same palette as the portfolio (yulevanopstal.netlify.app).
   Colours are defined three times: light, system dark, and [data-theme="dark"].
   ============================================================ */
:root{
  color-scheme: light;

  /* paper + ink */
  --paper-white:#FFFFFF;   /* plain white pages (low-ticket product pages) */
  --ground:#FFFFFF;   --ground-2:#F7F2F4;   --card:#FFFFFF;
  --ink:#220D11;      --ink-2:#3B2529;      --ink-3:#5E4A50;   /* deep plum-black #220D11 + warm greys from it (2026-10-21, premium palette) */
  --edge:#220D11;     /* dark buttons */

  /* brand: cream ("butter") and blush — surfaces only, never text */
  --butter-soft:#F8F4F5; --butter:#EFE8EA;  --butter-pop:#E2D8DB;   /* was cream/beige; neutral greys since 2026-10-23 (Yule: no more beige) */
  --on-butter:#220D11;   --butter-deep:#5E4A50;
  --blush-soft:#FDF2F8;  --blush:#FDF2F8;   /* ONE soft pink: --blush = --blush-soft since 2026-10-21 (too many shades) */   --blush-pop:#F4B9DB;   /* THE brand pink (2026-10-21) */
  --on-blush:#220D11;    --blush-deep:#220D11;   /* berry dropped 2026-10-23 (Yule never agreed on it): text/icons on pink are black */

  /* brand cards look the same in both themes: they point at this fixed palette */
  --brand-ink:#220D11; --brand-ink-2:#3B2529; --brand-ink-3:#5E4A50;
  --brand-paper:#FFFFFF; --brand-paper-2:#F7F2F4; --brand-card:#FFFFFF;
  --brand-hairline:rgba(34,13,17,.12); --brand-hairline-2:rgba(34,13,17,.07);
  /* the drawn Claude chat in Watch it work: Claude’s own look (orange spark, warm paper), same in both themes */
  --claude-orange:#D97757; --claude-paper:#FAF9F5; --claude-bubble:#F0EEE6; --claude-ink:#141413; --claude-ink-2:#73726C;
  --f-claude:ui-serif,Georgia,"Times New Roman",serif;
  /* Notion look, only for the patches on the real hub screenshots in the Creator Hub hero (stay light in dark mode) */
  --f-notion:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --nt-ink:#37352F; --nt-blue:#2383E2; --nt-col-green:#F6F9F6; --nt-dot-green:#448361;
  --nt-bar:#49A374; --nt-track:#EFEFED;   /* Notion progress bar (Money Hub spending pots) */

  --hairline:rgba(34,13,17,.12);  --hairline-2:rgba(34,13,17,.07);
  --shadow:0 18px 40px -28px rgba(34,13,17,.5);
  --shadow-lift:0 28px 60px -30px rgba(34,13,17,.45); --shadow-cut:drop-shadow(0 14px 18px rgba(34,13,17,.22));

  /* over photos and video */
  --cutout-shadow:rgba(34,13,17,.28);   /* soft shadow under the footer cut-out photo */
  --laptop-bezel:#3A3B40; --laptop-silver-hi:#F1F2F4; --laptop-silver:#C9CCD2; --laptop-silver-lo:#A3A7AF;   /* hero laptop: grey + silver */
  --clip:#A7ABB5; --clip-hi:#F4F5F8; --clip-shadow:rgba(34,13,17,.28);   /* paperclip (portfolio motif) */
  --tape:rgba(246,241,238,.93); --tape-crease:rgba(255,255,255,.22); --tape-fibre:rgba(120,100,90,.035);   /* washi tape */
  --statement-ink-2:#EADBE0; --statement-ink-3:#B39CA3; --brand-ink-dark:#220D11;   /* text on the black statement cards */
  --on-photo:#FFFFFF;  --play-bg:rgba(255,255,255,.92);  --play-ink:#220D11;
  --scrim:rgba(12,10,18,.26);  --photo-shadow:0 1px 6px rgba(0,0,0,.35);  --overlay:rgba(20,18,24,.9);

  /* type */
  --f-display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-hand:"Covered By Your Grace","Bradley Hand",cursive;   /* handwriting accent: notes + arrows only */
  /* TYPE SCALE (2026-10-21) — the ONLY sizes on the site: 7 sizes, weights 800/600/500/400, line heights 1.14/1.5/1.4.
     display  H1s (page headline, freebie name) ........ Outfit 800, lh 1.14
     title-l  big card titles (feature, Mail Club, brands, sign-up) Outfit 600, lh 1.15
     title    medium card + row titles ................. Outfit 600, lh 1.15
     body     reading text, fields, buttons, prices ..... body 400 / Outfit 600 for buttons + prices
     small    subheadlines, footer, back link, legend, topic tags
     xs       fine print, small buttons (Copy, Watch demo), email / code / handle
     mono     labels: section labels, tags, Free pills ... DM Mono 500, uppercase, tracking .12em */
  --t-name:clamp(1.85rem,8.2vw,2.35rem);
  --t-feat:clamp(1.35rem,5.8vw,1.6rem);
  --t-title:1.125rem;
  --t-body:1rem;  --t-small:.875rem;  --t-xs:.8125rem;  --t-mono:.6875rem;
  --t-hand:clamp(1.6rem,7vw,1.95rem);   /* handwritten notes (the hand font runs small, so it gets its own size) */
  --t-price:clamp(3.2rem,16vw,4.25rem);   /* the one exception: the big price on the founding price card */

  /* layout */
  --col:540px;                         /* the page column: phone width, centred on bigger screens */
  --gutter:16px;
  --section-gap:clamp(2.5rem,9vw,3.25rem);
  --card-gap:.9rem;
  --r-sm:12px; --r-md:18px; --r-lg:26px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#170A0D; --ground-2:#24141A; --card:#24141A;
    --ink:#FBF1F4; --ink-2:#E6D6DB; --ink-3:#BCA8AE;
    --edge:#FBF1F4;
    --hairline:rgba(251,241,244,.16); --hairline-2:rgba(251,241,244,.08);
    --shadow:0 18px 40px -28px rgba(0,0,0,.9);
    --shadow-lift:0 28px 60px -30px rgba(0,0,0,.85); --shadow-cut:drop-shadow(0 14px 18px rgba(0,0,0,.5));
    --scrim:rgba(0,0,0,.34); --overlay:rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#170A0D; --ground-2:#24141A; --card:#24141A;
  --ink:#FBF1F4; --ink-2:#E6D6DB; --ink-3:#BCA8AE;
  --edge:#FBF1F4;
  --hairline:rgba(251,241,244,.16); --hairline-2:rgba(251,241,244,.08);
  --shadow:0 18px 40px -28px rgba(0,0,0,.9);
  --shadow-lift:0 28px 60px -30px rgba(0,0,0,.85); --shadow-cut:drop-shadow(0 14px 18px rgba(0,0,0,.5));
  --scrim:rgba(0,0,0,.34); --overlay:rgba(0,0,0,.9);
}