/* Trupe design tokens, v7 (T272). The one source of truth: docs/DESIGN.md mirrors this file, never the other way round.
   Taken from the landing v7 (landing/styles.css): warm dotted paper, black ink edges, hard offset shadows, one color per
   critter, Hanken Grotesk heavy for titles and Caveat for the handwritten notes. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/vendor/fonts/hanken-grotesk.woff2) format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/vendor/fonts/caveat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/vendor/fonts/caveat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/vendor/fonts/jetbrains-mono.woff2) format("woff2")}
:root,[data-theme="papel"]{
  /* Paper and ink, the v7 values. --rule is the soft line (notebook ruling, separators); every object has an ink edge. */
  --paper:#F6F0E4; --paper-2:#EFE6D5; --card:#FFFCF6; --rule:#E3D8C4;
  --ink:#1D1B18; --ink-2:#4A443D; --ink-3:#6A6259; --on-ink:#F6F0E4;
  /* One color per critter, and its pale wash for fills. -ink is the same hue dark enough for text (AA on paper and card). */
  --fox:#E2583A; --owl:#5E9BD6; --bear:#E9B43A; --rabbit:#74AC61; --mouse:#E98FAB; --peng:#3D5FA3;
  --fox-w:#F9D9CC; --owl-w:#DAE8F6; --bear-w:#FAEBC2; --rabbit-w:#DFEED5; --mouse-w:#FADDE6; --peng-w:#DCE2F1;
  --fox-ink:#A8401F; --bear-ink:#7A5A12; --rabbit-ink:#2F6A2A; --peng-ink:#3D5FA3;
  /* Doodle fills: highlighter yellow, stickers, tape. Never text. */
  --d-yel:#F7D96A; --d-pink:#F6B9CA; --d-green:#A8CF8E; --d-blue:#8FB7E3; --d-orange:#F19B73; --d-sky:#C3DAF0;
  /* What a color means in the app. Same names the screens always used; they now point at the critters.
     terra = action and "waiting for you" (fox), honey = warning and resting (bear), sage/moss = all good and working
     (rabbit), peri = between agents and the team rule (penguin), rose and sky = critter colors without meaning. */
  --terra:#E2583A; --terra-ink:#A8401F; --terra-wash:#F9D9CC;
  --honey:#E9B43A; --honey-ink:#7A5A12; --honey-wash:#FAEBC2;
  --sage:#74AC61; --sage-wash:#DFEED5; --moss:#2F6A2A;
  --peri:#3D5FA3; --peri-ink:#3D5FA3; --peri-wash:#DCE2F1;
  --rose:#E98FAB; --rose-wash:#FADDE6; --sky:#5E9BD6; --sky-wash:#DAE8F6;
  --danger:#9A3A20;
  /* Lines. --line is the soft rule between rows; --line-2 the dashed edge of an empty place; --pencil only strokes and dots. */
  --line:#E3D8C4; --line-2:#B9AC97; --pencil:#8E8476;
  /* Type. One family for titles and interface (Hanken Grotesk: 800 titles, 700 labels, 600 buttons, 400 text), Caveat
     for what is written by hand (eyebrows, times, name tags), JetBrains Mono only for technical values. --serif is kept as
     the title family name the screens already use. */
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif; --serif:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --t-xs:12px; --t-sm:14px; --t-md:15px; --t-lg:18px; --t-xl:22px; --t-2xl:30px; --t-3xl:40px;
  --lh:1.5; --track-title:-.035em;
  /* Space: 4px base. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  /* Shape. Inner item 10, control 12, card 16, frame 22, pill 99. */
  --r1:10px; --r2:16px; --r3:22px; --r4:26px; --rc:12px; --pill:99px;
  /* Edges and depth: ink borders and hard offset shadows, never blur. */
  --edge:2px solid var(--edge-ink); --edge-s:1.5px solid var(--edge-ink);
  --hard:5px 5px 0 var(--edge-ink); --hard-s:3px 3px 0 var(--edge-ink); --hard-fox:4px 4px 0 var(--fox); --hard-hi:6px 6px 0 var(--fox);
  --lift:3px 3px 0 var(--edge-ink);
  /* T282: what a theme changes besides paper and ink. On Papel each one is what the screens always drew; a dark theme sets
     its own. --edge-ink is the contour and the hard shadow (the ink of the drawing, not of the text: on a dark theme cream
     text with cream edges turns every object into a lit box). --fill is the main action (.btn.main, send), --sel the picked
     tab, --dots the paper grid, --scrim behind a dialog, --logo-tile behind a third-party logo (light on every theme, so
     --logo-ink, the black of Notion's and GitHub's marks and of a missing logo's initial, stays dark on all of them), --halo and --rim the stage
     light and the thin light line around a whole critter (their black outline is in the drawing and vanishes on dark). */
  --edge-ink:#1D1B18; --fill:var(--ink); --on-fill:var(--on-ink); --fill-hi:var(--fox); --on-fill-hi:var(--ink);
  --sel:var(--ink); --on-sel:var(--on-ink); --sel-ring:var(--ink); --chat-h:var(--fox-w);
  --dots:rgba(120,95,60,.07); --scrim:rgba(29,27,24,.38); --scrim-find:rgba(29,27,24,.56); --logo-tile:#FFFFFF; --logo-ink:#1D1B18; --stripe:rgba(255,255,255,.25);
  --halo:transparent; --rim:none;
  /* Page column (T120, T359): every inside page uses the width of the screen up to this ceiling and, wider than that, sits
     centred with the same margin on both sides. Every first-level block of the page and its header buttons share it. */
  --col:1440px;
  /* T359: a reading block (a form, setup steps, a list of settings) keeps this width inside the column, from its left edge. */
  --read:820px;
  /* Running text keeps --measure a line. ch is the width of a 0, wider than the average letter: 58ch is ~70 real
     characters a line in PT, EN and ES. */
  --measure:58ch;
  /* T359: the page intro is one or two sentences under the title; it gets a few more characters (~80) so a two-sentence
     intro sits on one line on the desktop instead of leaving its last words alone on a second one. */
  --lede:66ch;
  /* T354/T359: every grid of cards uses this one track, so the columns of every screen line up (3 at 1440, 4 at 1680, 1 on the phone). */
  --track:320px;
  --dur:180ms; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --draw:cubic-bezier(.65,0,.25,1);
}

/* T282: themes. A theme is only this set of tokens, put on <html data-theme>; no screen changes. Papel is :root above.
   Any element can wear one (the swatches of the theme picker do), so the selectors are not tied to :root.
   Papel is the default for everyone (T342): the device's light or dark never changes the theme, only a pick in Seu
   perfil does, put on before the first paint by the script at the top of index.html. Hex and contrast come from the
   phase 1 study (WCAG AA on every text pair,
   test/t282-temas.test.ts checks it). Shared by the three dark ones: the critters a little lighter, washes at 15% of the
   critter over the card (owl and penguin at 10%, so the theme stays warm), -ink colors light enough for text.
   Changed from the study: --danger #EE8A66 (#B4532F was 3.3 as text), --edge-ink of Cacau and Oliva a step lighter so the
   contour passes 3:1 on the card, and --d-yel darker so --ink-2 on a picked .choice passes AA. */
:root,[data-theme="papel"]{color-scheme:light}
[data-theme="cacau"],[data-theme="carvao"],[data-theme="oliva"]{color-scheme:dark;
  --fox:#E8643F; --owl:#6FA6D8; --bear:#E9B43A; --rabbit:#7DB46A; --mouse:#E796AE; --peng:#6E8CC9;
  --fox-ink:#F59A7A; --bear-ink:#EDC877; --rabbit-ink:#A4CF92; --peng-ink:#AEBDE5;
  --terra:#E8643F; --terra-ink:#F59A7A; --honey:#E9B43A; --honey-ink:#EDC877; --sage:#7DB46A; --moss:#8CC07A;
  --peri:#6E8CC9; --peri-ink:#D2C8D2; --rose:#E796AE; --sky:#6FA6D8; --danger:#EE8A66;
  --fill:var(--fox); --on-fill:var(--on-ink); --fill-hi:var(--fox-ink); --on-fill-hi:var(--on-ink);
  --sel:color-mix(in oklab,var(--ink) 16%,var(--card)); --on-sel:var(--ink); --sel-ring:var(--edge-ink);
  --chat-h:color-mix(in oklab,var(--fox) 8%,var(--card));
  --scrim:rgba(0,0,0,.6); --scrim-find:rgba(0,0,0,.66); --logo-tile:var(--ink); --stripe:transparent;
  /* A solid 1px light outline, like a cut-out sticker: the penguin's blue back and the ink contour baked into the
     critter art vanish on a dark card, a soft glow was not enough (about 1.9:1 at the silhouette). */
  --rim:drop-shadow(1px 0 0 #EADCC6) drop-shadow(-1px 0 0 #EADCC6) drop-shadow(0 1px 0 #EADCC6) drop-shadow(0 -1px 0 #EADCC6);
}
/* Cacau: coffee and chocolate, the warmest; the paper becomes leather. The dark one of "Seguir o sistema". */
[data-theme="cacau"]{
  --paper:#2A1B12; --paper-2:#20140C; --card:#38261A; --rule:#4F392A; --line:#4F392A; --line-2:#71553F; --pencil:#8F735B;
  --ink:#F6E5D0; --ink-2:#D9C1A6; --ink-3:#C2A88C; --on-ink:#2A1B12; --edge-ink:#8E6E54;
  --fox-w:#522F20; --owl-w:#3E332D; --bear-w:#533B1F; --rabbit-w:#423B26; --mouse-w:#523730; --peng-w:#3D302C;
  --d-yel:#5F4E2A; --d-pink:#71524F; --d-green:#5A593D; --d-blue:#525256; --d-orange:#704935; --d-sky:#625C5A;
  --terra-wash:#522F20; --honey-wash:#533B1F; --sage-wash:#423B26; --peri-wash:#48362F; --rose-wash:#523730; --sky-wash:#3E332D;
  --dots:rgba(255,225,190,.05); --halo:rgba(255,205,160,.18);
}
/* Carvão quente: warmed charcoal, grey-brown with almost no colour; the soberest. */
[data-theme="carvao"]{
  --paper:#1D1B19; --paper-2:#161413; --card:#282523; --rule:#3A3633; --line:#3A3633; --line-2:#5A544E; --pencil:#7C7670;
  --ink:#EEE8E0; --ink-2:#C9C1B8; --ink-3:#B3AAA0; --on-ink:#1D1B19; --edge-ink:#7A7068;
  --fox-w:#452E27; --owl-w:#2F3235; --bear-w:#453A26; --rabbit-w:#353A2E; --mouse-w:#453638; --peng-w:#2F2F34;
  --d-yel:#574E30; --d-pink:#665155; --d-green:#4E5843; --d-blue:#47515D; --d-orange:#64483B; --d-sky:#565B60;
  --terra-wash:#452E27; --honey-wash:#453A26; --sage-wash:#353A2E; --peri-wash:#3A3537; --rose-wash:#453638; --sky-wash:#2F3235;
  --dots:rgba(255,235,210,.05); --halo:rgba(255,214,170,.20);
}
/* Oliva escuro: green graphite of earth and moss; the fox stands out as in a forest. */
[data-theme="oliva"]{
  --paper:#191C15; --paper-2:#13160F; --card:#242A1F; --rule:#353D2E; --line:#353D2E; --line-2:#545E48; --pencil:#747A62;
  --ink:#EBEADB; --ink-2:#C6C7B1; --ink-3:#AFB09A; --on-ink:#191C15; --edge-ink:#6C775E;
  --fox-w:#413324; --owl-w:#2C3632; --bear-w:#423F23; --rabbit-w:#313F2A; --mouse-w:#413A34; --peng-w:#2B3430;
  --d-yel:#56512F; --d-pink:#635552; --d-green:#4C5C40; --d-blue:#44545A; --d-orange:#624C38; --d-sky:#545F5E;
  --terra-wash:#413324; --honey-wash:#423F23; --sage-wash:#313F2A; --peri-wash:#373A33; --rose-wash:#413A34; --sky-wash:#2C3632;
  --dots:rgba(235,240,215,.05); --halo:rgba(255,220,170,.19);
}