/* =====================================================================
   NARCISSOS · MENTAL HEALTH CLUB · DESIGN TOKENS  (v1.0 "Club Noir")
   ---------------------------------------------------------------------
   Every colour, size, space, shadow and duration the app uses lives here.
   Components (components.css) only ever read ROLE tokens such as --accent,
   --fg, --signal. Raw palette tokens (--c-*) are used only in this file.

   Theme keys are the ones the app already stores in $.theme:
     dark (default) · light · auto · sunset · aurora · midnight · phoenix · gold
   Apply with <html data-theme="…">.

   Colour semantics (the one rule that keeps the brand legible):
     --accent  (post-it yellow) = "for you to act on", "you are here", reward
     --signal  (terracotta)     = "pattern detected in a message". Never alarm red.
     --ok-*                     = "correct answer". Paired with a check and the word "Oikein".
     Nothing else gets a colour. No red anywhere.
   ===================================================================== */

:root{
  /* ---------- 1. Raw MHC palette (do not use in components) ---------- */
  --c-ink:#0b0b0c;          /* MHC near-black */
  --c-ink-1:#131314;        /* raised surface on ink */
  --c-ink-2:#1c1c1e;
  --c-ink-3:#2a2a2d;
  --c-white:#ffffff;
  --c-cream:#f4f2ea;        /* mentalhealthclub.fi paper */
  --c-cream-1:#fbfaf6;
  --c-cream-2:#e6e2d4;
  --c-terra:#d9744a;        /* mentalhealthclub.fi terracotta */
  --c-terra-dk:#a64a25;     /* terracotta for text on cream (5.2:1) */
  --c-yellow:#f9e13a;       /* MHC post-it yellow */
  --c-yellow-lo:#dcc220;    /* post-it curl / fold shade */
  --c-pink:#f6a9c9;   --c-pink-lo:#e48eb2;
  --c-blue:#9fcbf2;   --c-blue-lo:#7fb0dd;
  --c-green:#a9de9b;  --c-green-lo:#8cc87d;
  --c-orange:#f7ae5e; --c-orange-lo:#e0954a;
  --c-gold:#e4c66c;   --c-gold-lo:#c9a84a;
  --c-tape-pink-a:rgba(246,169,201,.94); --c-tape-pink-b:rgba(255,224,237,.94);

  /* ---------- 2. Role tokens · NOIR (dark, default) ---------- */
  --page:var(--c-ink);              /* the page itself; NOT re-scoped by surfaces (used for fold cut-outs) */
  --bg:var(--c-ink);                /* current surface (re-scoped by post-it / paper / inverted blocks) */
  --bg-raise:var(--c-ink-1);        /* inputs, verdict card, sheets on dark */
  --bg-sunk:#070708;
  --fg:#ffffff;                     /* 19.6:1 on ink */
  --fg-2:rgba(255,255,255,.78);     /* 12.0:1  secondary text */
  --fg-3:rgba(255,255,255,.62);     /*  7.6:1  meta, captions, inactive tabs (smallest allowed tone) */
  --rule:rgba(255,255,255,.16);     /* hairlines between rows */
  --rule-2:rgba(255,255,255,.40);   /* control outlines (3.9:1 non-text) */
  --rule-strong:#ffffff;            /* 2px section rules */
  --inv-bg:#ffffff;                 /* inverted poster block (speed game, toast) */
  --inv-fg:var(--c-ink);

  --accent:var(--c-yellow);         /* solid accent: markers, CTA, progress */
  --accent-paper:var(--accent);     /* post-it fill (may be a gradient in reward themes) */
  --accent-lo:var(--c-yellow-lo);   /* fold / curl shade */
  --on-accent:var(--c-ink);         /* text on accent: 14.9:1 */
  --accent-text:var(--accent);      /* accent used as text on --bg (light theme swaps to ink) */

  --signal:var(--c-terra);          /* 6.1:1 on ink */
  --signal-soft:rgba(217,116,74,.14);
  --on-signal:var(--c-ink);

  --ok-bg:var(--c-green);           /* correct answer fill (+ check + "Oikein") 12.6:1 with ink */
  --ok-fg:var(--c-ink);

  --progress:var(--accent);         /* progress fills = "you are here" */
  --progress-track:rgba(255,255,255,.16);

  --cta-bg:var(--accent);           /* .btn--primary: THE action of a view (max one) */
  --cta-fg:var(--on-accent);
  --cta-edge:var(--accent);

  /* fixed "ink on paper" roles: post-its, paper sheets, stickers re-scope --fg* to these */
  --ink:var(--c-ink);
  --ink-2:rgba(11,11,12,.80);       /* >= 9:1 on every post-it */
  --ink-3:rgba(11,11,12,.66);       /* >= 5:1 on every post-it */
  --ink-rule:rgba(11,11,12,.18);
  --ink-rule-2:rgba(11,11,12,.56);
  --signal-ink:#7d3214;             /* signal on paper: deep terracotta, >= 4.6:1 on every post-it colour */
  /* inverted blocks (white on Noir, ink on Paperi) */
  --inv-fg-2:rgba(11,11,12,.78); --inv-fg-3:rgba(11,11,12,.64);
  --inv-rule:rgba(11,11,12,.16); --inv-rule-2:rgba(11,11,12,.5);

  /* category paper (post-it colour variants). Never change with the theme, never mean "good/bad" */
  --note-yellow:var(--c-yellow); --note-yellow-lo:var(--c-yellow-lo);
  --note-pink:var(--c-pink);     --note-pink-lo:var(--c-pink-lo);
  --note-blue:var(--c-blue);     --note-blue-lo:var(--c-blue-lo);
  --note-green:var(--c-green);   --note-green-lo:var(--c-green-lo);
  --note-orange:var(--c-orange); --note-orange-lo:var(--c-orange-lo);
  --note-cream:var(--c-cream);   --note-cream-lo:var(--c-cream-2);

  --chalk:#ffffff; --chalk-3:rgba(255,255,255,.66);   /* fixed white on ink (member card) */
  --sheen:linear-gradient(172deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 38%,rgba(0,0,0,0) 72%,rgba(0,0,0,.06) 100%); /* paper light */
  --sheen-hi:rgba(255,255,255,.35);
  --paper:var(--c-cream);           /* cream paper: paywall sheet, label tape, quote slip */
  --on-paper:var(--c-ink);
  --sticker-edge:#ffffff;           /* die-cut reward sticker edge */
  --tape-a:var(--c-tape-pink-a);    /* washi tape stripes */
  --tape-b:var(--c-tape-pink-b);
  --heart:var(--c-ink);             /* the MHC black heart. Always black, always on paper. */

  --page-glow:none;                 /* optional static canvas treatment (reward themes) */
  --scrim:rgba(5,5,6,.74);
  --read-fg:#ecebe4;               /* long-form body: warm off-white, less glare (16.5:1) */
  --read-fg-2:#bdbab0;              /* long-form secondary (9.4:1) */
  --focus:var(--accent);

  /* hand-drawn doodle images (colour baked per theme; shapes only change here) */
  --scribble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 5.2C5 3.4 9 3.2 13 4.6s8 1.9 12.5.2S34 2.6 38 4s7 1.6 10 .9' fill='none' stroke='%23d9744a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --doodle-under:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13C60 7 130 5 196 8c36 1.6 70 1 100-4M30 16c50-3 120-4 190-2' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --doodle-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M118 9C78 3 22 9 10 34c-10 22 30 39 92 39 58 0 92-12 90-34C190 17 150 6 96 8 70 9 44 14 30 22' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

  /* ---------- 3. Typography ---------- */
  --f-sans:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-type:'Orator Std','Courier Prime',ui-monospace,'Courier New',monospace;
  --t-mega:clamp(120px,44vw,200px);   /* celebration numerals only */
  --t-display:clamp(40px,13.4vw,54px);/* one poster headline per screen */
  --t-h1:clamp(30px,9.4vw,38px);
  --t-h2:24px;
  --t-h3:19px;
  --t-lead:18px;
  --t-body:16px;
  --t-read:18px;                      /* long-form reading */
  --t-small:14px;
  --t-label:12px;                     /* typewriter eyebrow. Minimum for uppercase type */
  --t-tab:11px;                       /* tab labels. Absolute minimum text size */
  --lh-display:1.04;                 /* not tighter: Montserrat caps Ä/Ö dots on line 2 must clear line 1 (Finnish) */
  --lh-head:1.05; --lh-body:1.5; --lh-read:1.7;
  --tr-display:-.025em; --tr-label:.14em; --tr-button:.06em;
  --w-body:500; --w-read:430; --w-strong:700; --w-heavy:800; --w-black:900;

  /* ---------- 4. Space (4pt) ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;
  --gutter:20px;
  --measure:36em;                     /* max line length for prose */

  /* ---------- 5. Shape & stroke ---------- */
  --r1:2px; --r2:4px; --r-sheet:8px; --r-round:999px;   /* paper is square: 2-4px everywhere */
  --hair:1px; --line:1.5px; --bold:2px;
  --tilt-l:-1.6deg; --tilt-r:1.4deg; --tilt-xs:-.8deg;  /* long text never rotates more than .8deg */
  --fold:26px;

  /* ---------- 6. Elevation: depth comes from paper, tape and tilt, never blur ---------- */
  --sh-postit:0 1px 1px rgba(0,0,0,.30),0 8px 14px -6px rgba(0,0,0,.55),0 22px 30px -18px rgba(0,0,0,.7);
  --sh-sticker:0 1px 1px rgba(0,0,0,.25),0 6px 10px -4px rgba(0,0,0,.45);
  --sh-sheet:0 -24px 60px rgba(0,0,0,.55);
  --sh-toast:0 14px 30px -10px rgba(0,0,0,.7);
  --sh-card:0 18px 30px -16px rgba(0,0,0,.6);

  /* ---------- 7. Motion ---------- */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-stick:cubic-bezier(.34,1.56,.64,1);   /* a note landing with a little overshoot */
  --d1:140ms; --d2:260ms; --d3:520ms; --d-toast:4200ms;

  /* ---------- 8. Layout & safe areas ---------- */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --appbar-h:56px; --tabbar-h:60px; --tap:44px;

  color-scheme:dark;
}

/* Derived roles are re-declared on every [data-theme] element so a nested
   preview (theme picker swatch, unlock post-it) recomputes them correctly. */
[data-theme]{
  --accent-paper:var(--accent); --accent-text:var(--accent); --progress:var(--accent);
  --cta-bg:var(--accent); --cta-edge:var(--accent); --focus:var(--accent);
}

/* =====================================================================
   PAPERI · light theme. Cream newsprint, black ink, same yellow post-its.
   Yellow never carries text-contrast or progress on cream: --accent-text
   and --progress switch to ink.
   ===================================================================== */
[data-theme="light"]{
  --page:var(--c-cream); --bg:var(--c-cream); --bg-raise:var(--c-cream-1); --bg-sunk:var(--c-cream-2);
  --fg:var(--c-ink); --fg-2:rgba(11,11,12,.78); --fg-3:rgba(11,11,12,.64);
  --rule:rgba(11,11,12,.16); --rule-2:rgba(11,11,12,.46); --rule-strong:var(--c-ink);
  --inv-bg:var(--c-ink); --inv-fg:#ffffff;
  --accent-text:var(--c-ink); --cta-edge:var(--c-ink); --inv-fg-2:rgba(255,255,255,.80); --inv-fg-3:rgba(255,255,255,.66); --inv-rule:rgba(255,255,255,.18); --inv-rule-2:rgba(255,255,255,.5);
  --signal:var(--c-terra-dk); --signal-soft:rgba(166,74,37,.10); --on-signal:#ffffff;
  --progress:var(--c-ink); --progress-track:rgba(11,11,12,.14);
  --paper:#ffffff; --sticker-edge:#ffffff;
  --scrim:rgba(20,18,14,.55);
  --read-fg:#1b1a17; --read-fg-2:#4a4740;
  --focus:var(--c-ink);
  --scribble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 5.2C5 3.4 9 3.2 13 4.6s8 1.9 12.5.2S34 2.6 38 4s7 1.6 10 .9' fill='none' stroke='%23a64a25' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --sh-postit:0 1px 1px rgba(60,50,0,.20),0 10px 14px -8px rgba(60,50,0,.36),0 24px 30px -20px rgba(40,30,0,.42);
  --sh-sticker:0 1px 1px rgba(60,50,0,.2),0 6px 10px -4px rgba(60,50,0,.3);
  --sh-sheet:0 -18px 50px rgba(40,30,0,.22);
  --sh-toast:0 14px 30px -10px rgba(40,30,0,.4);
  --sh-card:0 18px 30px -16px rgba(40,30,0,.3);
  color-scheme:light;
}
/* AUTO · follows the device. Dark = Noir defaults above; light = Paperi (duplicated on purpose,
   custom properties cannot be shared between a media query and a selector). */
@media (prefers-color-scheme:light){
  [data-theme="auto"]{
    --page:var(--c-cream); --bg:var(--c-cream); --bg-raise:var(--c-cream-1); --bg-sunk:var(--c-cream-2);
    --fg:var(--c-ink); --fg-2:rgba(11,11,12,.78); --fg-3:rgba(11,11,12,.64);
    --rule:rgba(11,11,12,.16); --rule-2:rgba(11,11,12,.46); --rule-strong:var(--c-ink);
    --inv-bg:var(--c-ink); --inv-fg:#ffffff;
    --accent-text:var(--c-ink); --cta-edge:var(--c-ink); --inv-fg-2:rgba(255,255,255,.80); --inv-fg-3:rgba(255,255,255,.66); --inv-rule:rgba(255,255,255,.18); --inv-rule-2:rgba(255,255,255,.5);
    --signal:var(--c-terra-dk); --signal-soft:rgba(166,74,37,.10); --on-signal:#ffffff;
    --progress:var(--c-ink); --progress-track:rgba(11,11,12,.14);
    --paper:#ffffff;
    --scrim:rgba(20,18,14,.55);
    --read-fg:#1b1a17; --read-fg-2:#4a4740;
    --focus:var(--c-ink);
    --scribble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 5.2C5 3.4 9 3.2 13 4.6s8 1.9 12.5.2S34 2.6 38 4s7 1.6 10 .9' fill='none' stroke='%23a64a25' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --sh-postit:0 1px 1px rgba(60,50,0,.20),0 10px 14px -8px rgba(60,50,0,.36),0 24px 30px -20px rgba(40,30,0,.42);
    --sh-sheet:0 -18px 50px rgba(40,30,0,.22);
    color-scheme:light;
  }
}

/* =====================================================================
   STREAK-REWARD THEMES · "new print runs" of the same Noir poster.
   Same layout, same terracotta signal. Each swaps the post-it paper, the
   washi tape and the canvas tint, plus one special treatment.
   Every accent keeps black ink at 9:1 or better.
   ===================================================================== */
/* Noir base re-declared for every dark key, so a dark preview nested inside Paperi
   (theme picker, unlock note) renders with the right wall, ink and accent. */
[data-theme="dark"],[data-theme="sunset"],[data-theme="aurora"],[data-theme="midnight"],[data-theme="phoenix"],[data-theme="gold"]{
  --page:var(--c-ink); --bg:var(--c-ink); --bg-raise:var(--c-ink-1); --bg-sunk:#070708;
  --fg:#ffffff; --fg-2:rgba(255,255,255,.78); --fg-3:rgba(255,255,255,.62);
  --rule:rgba(255,255,255,.16); --rule-2:rgba(255,255,255,.40); --rule-strong:#ffffff;
  --inv-bg:#ffffff; --inv-fg:var(--c-ink);
  --accent:var(--c-yellow); --accent-lo:var(--c-yellow-lo);
  --signal:var(--c-terra); --progress-track:rgba(255,255,255,.16);
  --paper:var(--c-cream); --read-fg:#ecebe4; --read-fg-2:#bdbab0;
  --tape-a:var(--c-tape-pink-a); --tape-b:var(--c-tape-pink-b);
  color-scheme:dark;
}
/* 14 d · Auringonlasku: warm brown-black wall, pink post-its, orange tape */
[data-theme="sunset"]{
  --page:#120d0b; --bg:#120d0b; --bg-raise:#1c1512; --bg-sunk:#0b0807;
  --accent:var(--c-pink); --accent-lo:var(--c-pink-lo);
  --tape-a:rgba(247,174,94,.95); --tape-b:rgba(255,226,190,.95);
  --read-fg:#f1e9e2;
}
/* 30 d · Revontuli: green-black wall, green post-its, blue tape, a faint aurora at the top edge */
[data-theme="aurora"]{
  --page:#08100d; --bg:#08100d; --bg-raise:#101a16; --bg-sunk:#050a08;
  --accent:var(--c-green); --accent-lo:var(--c-green-lo);
  --ok-bg:var(--c-blue);            /* correct must differ from the accent */
  --tape-a:rgba(159,203,242,.95); --tape-b:rgba(222,238,252,.95);
  --page-glow:radial-gradient(120% 60% at 50% -10%,rgba(169,222,155,.10),transparent 60%);
}
/* 60 d · Keskiyö: navy-black wall, blue post-its, MHC-yellow tape */
[data-theme="midnight"]{
  --page:#080b13; --bg:#080b13; --bg-raise:#10141f; --bg-sunk:#05070c;
  --accent:var(--c-blue); --accent-lo:var(--c-blue-lo);
  --tape-a:rgba(249,225,58,.95); --tape-b:rgba(253,243,170,.95);
  --read-fg:#e8ebf2;
}
/* 180 d · Feeniks: ember-black wall, post-its printed as a yellow-to-orange sunrise gradient */
[data-theme="phoenix"]{
  --page:#120907; --bg:#120907; --bg-raise:#1d1210; --bg-sunk:#0b0605;
  --accent:#f8c64a; --accent-lo:var(--c-orange-lo);
  --accent-paper:linear-gradient(160deg,var(--c-yellow) 0%,#f8c64a 45%,var(--c-orange) 100%);
  --tape-a:rgba(246,169,201,.95); --tape-b:rgba(255,224,237,.95);
}
/* 500 d · Kulta: deep warm black, gold post-its, gold foil tape, gold section rules */
[data-theme="gold"]{
  --page:#0b0a07; --bg:#0b0a07; --bg-raise:#16140e; --bg-sunk:#060504;
  --accent:var(--c-gold); --accent-lo:var(--c-gold-lo);
  --accent-paper:linear-gradient(165deg,#f0d88a 0%,var(--c-gold) 55%,#d4b257 100%);
  --rule-strong:var(--c-gold);
  --tape-a:rgba(228,198,108,.95); --tape-b:rgba(250,238,200,.95);
}

/* =====================================================================
   TEXT SIZE (the "Aa" control) · <html data-text="l|xl">. Scales reading and body
   text only; poster headlines and chrome stay fixed so layouts hold.
   ===================================================================== */
[data-text="l"]{--t-body:17px;--t-read:20px;--t-lead:19px;--t-small:15px}
[data-text="xl"]{--t-body:19px;--t-read:22px;--t-lead:21px;--t-small:16px;--lh-read:1.65}

/* =====================================================================
   LEGACY ALIASES · lets the current innerHTML templates render in the new
   palette while they are migrated (see DESIGN-SPEC.md §13). Delete when
   `grep -E "var\(--(text|glass|card-border|emerald|amber|rose)"` is empty.
   ===================================================================== */
:root,[data-theme]{
  --text:var(--fg); --text-dim:var(--fg-2); --text-muted:var(--fg-3);
  --bg-0:var(--page); --bg-1:var(--bg-raise); --bg-2:var(--bg-raise); --bg-3:var(--bg-sunk);
  --card-border:var(--rule); --glass:var(--bg-raise); --glass-b:var(--rule); --glass-h:var(--bg-raise);
  --emerald:var(--ok-bg); --amber:var(--signal); --rose:var(--signal);
  --accent-glow:transparent; --glow:none; --shadow:var(--sh-card);
  --purple:var(--accent); --pink:var(--accent); --teal:var(--accent);   /* old gradient stops collapse to the flat accent */
  --r:var(--r2); --rs:var(--r2);                                       /* paper is square */
}
/* --emerald is also used as a TEXT colour by old templates: green text has no contrast on cream, so Paperi inks it. */
[data-theme="light"]{--emerald:var(--fg)}
@media (prefers-color-scheme:light){[data-theme="auto"]{--emerald:var(--fg)}}
/* Legacy layout tokens used by the shell and old templates (index.html, init.js offsets).
   --st/--sb are the device safe areas from env(): Swift no longer injects them. */
:root{
  --st:var(--sat); --sb:var(--sab);
  --hdr-h:var(--appbar-h);                       /* header row, excluding the top safe area */
  --tab-h:calc(var(--tabbar-h) + 4px);           /* tab bar row (4px top pad + 60px tabs), excluding the bottom safe area */
  --app-w:560px;                                 /* content column on tablets/desktop (gutters included) */
}