/*
  DILLY DESIGN TOKENS, mapped 1:1 from the app (the light appearance only).
  Every value below is copied from a file in mobile/; the comment before each group names the source.
  The app also has a dark appearance (mobile/lib/theme/palette.ts, docs/DARK_MODE.md). This site is
  light only on purpose (founder brief), so no dark values are used here.
*/

@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/Nunito_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/Nunito_600SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/Nunito_700Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type: mobile/lib/home/palette.ts `nunito` (Nunito, from @expo-google-fonts/nunito). The site stops at weight 700. */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Page and text: mobile/lib/home/palette.ts `home` and mobile/lib/theme/palette.ts TOKENS (light column) */
  --page: #fefefe;
  --card: #ffffff;
  --card-recessed: #f6f7fb;
  --lip: #c7d0e6;
  --hairline: #eceef6;
  --track: #d2daec;
  --dot-inactive: #e8eaf2;
  --ink: #06061f;
  --ink-soft: #6f7898;
  --ink-muted: #7c859c;
  --eyebrow: #3e4570;
  --paragraph: #40496f;
  --skill-body: #555b88;
  --skill-cta: #14124f;

  /* Brand: mobile/lib/home/palette.ts (purple, navActive). The brand color is the light green of the app icon background (mobile/assets/images/icon.png);
     the soft tint is the icon's own light green (app.json splash backgroundColor).
     --brand: fills and bands. Ink (--ink) text on it is about 17:1.
     --brand-deep: pressed states and edges (4.0:1 on white). --brand-text: green TEXT on a light page. */
  --purple: #7c65ef;
  --purple-deep: #6b5ae4;
  --nav-active: #3f39d3;
  --nav-active-pill: #ece9fe;
  --nav-inactive: #8a8fab;
  --brand: #f3fde8;
  --brand-deep: #cdeab4;
  --brand-text: #2f6b12;
  --brand-soft: #e4f7d0;
  --brand-soft-lip: #bfe3a2;

  /* Streak (warm): mobile/lib/theme/palette.ts TOKENS streakBg / streakBorder / streakNumber */
  --streak-bg: #fef5e3;
  --streak-border: #fdeacd;
  --streak-number: #eb8a14;
  /* The streak moment screen: palette.ts streakScreen, streakScreenLip, onStreakScreen, streakPlate*, painted the same in light and dark */
  --streak-screen: #e8590c;
  --streak-screen-lip: #b8440a;
  --on-streak-screen: #ffffff;
  --streak-plate: #fff6e8;
  --streak-plate-lip: #f0c48a;
  --streak-plate-ink: #4a1e02;
  --streak-plate-muted: #8a5a33;
  --streak-plate-accent: #b8440a;

  /* Feedback: palette.ts TOKENS errorText/errorBg/okText/okBg, marker (the soft highlighter behind a word) */
  --error-text: #c93c3c;
  --error-bg: #ffeded;
  --ok-text: #23834a;
  --ok-bg: #e6f8ec;
  --marker: #ffe69a;

  /* The Workshop family (light): mobile/lib/theme/workshop.ts WS_LIGHT */
  --ws-card: #eef1fd;
  --ws-card-lip: #b3bde8;
  --ws-panel: #e2ddfb;
  --ws-panel-lip: #b7aaee;
  --ws-well: #dce1f5;
  --ws-ink: #1b2150;
  --ws-ink-soft: #434c7e;
  --ws-ink-muted: #58608c;
  --ws-mint: #5ee6b0;
  --ws-mint-lip: #2dae82;
  --ws-mint-ink: #082a20;
  --ws-mint-text: #09694b;
  --ws-mint-bubble: #ffffff;
  --ws-mint-track: #c7f7e3;
  --ws-mint-soft: #c4f5df;
  --ws-mint-soft-lip: #8fddbc;
  --ws-soft: #dde3fa;
  --ws-soft-lip: #aeb8ea;
  --ws-soft-ink: #25306b;
  --ws-purple: #6c55ea;
  --ws-purple-lip: #4b3bb0;
  --ws-blue: #3a6fe0;
  --ws-blue-lip: #2850a8;
  --ws-piece-ink: #ffffff;
  --ws-sky: #d6e8ff;
  --ws-sky-lip: #9cc2f2;
  --ws-sky-ink: #14275e;
  --ws-gold: #ffc93c;
  --ws-gold-lip: #c98a00;
  --ws-gold-ink: #3a2600;
  --ws-gold-text: #855600;
  --ws-coin-number: #f2b10a;
  --ws-coral: #be3b34;
  --ws-coral-card: #fce0da;
  --ws-coral-lip: #eba79b;
  --ws-chosen: #cdf4e2;
  --ws-chosen-lip: #12865e;

  /* Companion screen colors (soft fill and its edge): mobile/lib/theme/companionColors.ts `cc` */
  --cc-lavender: #eee9fe;
  --cc-lavender-edge: #c9bdf5;
  --cc-sunny: #fef5dd;
  --cc-sunny-edge: #ebcf8a;
  --cc-mint: #e3f8ec;
  --cc-mint-edge: #96d9b2;
  --cc-sky: #e3f4fd;
  --cc-sky-edge: #a9d3ea;
  --cc-peach: #fef1e4;
  --cc-peach-edge: #edbe8c;
  --cc-soft: #f6f7fb;
  --cc-soft-edge: #c5cbe0;
  --cc-mine: #7c65ef;
  --cc-mine-edge: #5a47cc;
  /* The quoted "AI" sticker (founder, 2026-10-18): saturated golden fill, ink outline and hard ink offset shadow. --ai-ink is the site ink. */
  --ai-yellow: #ffc933;
  --ai-ink: var(--ink);
  --cc-tag-ink: #a5551f;
  --cc-live-ink: #1f7a45;
  --cc-go: #2b9a58;
  --cc-go-edge: #1f7a45;
  /* Mobile menu: one ink per page name, each from the app's palette and at least 4.5:1 on the sunny tint (--cc-sunny) */
  --menu-bg: var(--cc-sunny);
  --menu-home: #3f39d3;      /* nav active indigo */
  --menu-how: #6c55ea;       /* Workshop purple (ws-purple) */
  --menu-workshop: #09694b;  /* mint text */
  --menu-parents: #1f66c4;   /* sky family, darkened for text */
  --menu-plans: #be3b34;     /* coral text (ws-coral) */
  --menu-faq: #855600;       /* gold text (ws-gold-text) */
  --menu-help: #0b7285;      /* teal, 5.1:1 on the sunny tint */
  --menu-contact: #b02f78;   /* pink */
  --cc-coral: #fce3dd;
  --cc-coral-edge: #e7a092;
  --cc-bolt: #ffc93c;
  --cc-bolt-edge: #c98a00;

  /* The six companions' colors: mobile/lib/avatars.ts AVATARS (bg, ring, edge) and lib/companion/art.ts CIRCLE_LOOK (tint, lip) */
  --pip-bg: #d9e8fe;
  --pip-lip: #8fb3ee;
  --mochi-bg: #eadffb;
  --mochi-lip: #b7a2ea;
  --fern-bg: #ddf3df;
  --fern-lip: #93cc9c;
  --nova-bg: #ffe3d2;
  --nova-lip: #f0a67b;
  --pebble-bg: #d6eef0;
  --pebble-lip: #86c0c8;
  --wisp-bg: #fff3c9;
  --wisp-lip: #ebc857;

  /* The kit's six door colors: mobile/lib/theme/kit.ts KIT_LIGHT */
  --door-red: #e0483f;
  --door-blue: #2f6fdb;
  --door-green: #23935a;
  --door-yellow: #f5c935;
  --door-purple: #8656e0;
  --door-orange: #f08a35;

  /* Raised look: mobile/components/RaisedButton.tsx. A button is radius 28 with a 5 point lip; RaisedCard is radius 22 with a 4 point lip;
     RaisedDot has a 3 point lip; RaisedPiece radius 14 with a 3 point lip. The face sits proud of a darker edge; pressing sinks the face into it. */
  --radius-button: 28px;
  --lip-button: 5px;
  --radius-card: 22px;
  --lip-card: 4px;
  --radius-piece: 14px;
  --lip-piece: 3px;
  /* Chat bubbles: mobile/components/companion/training/Bubbles.tsx (radius 22, the speaker's lower corner 6) */
  --radius-bubble: 22px;
  --radius-bubble-tail: 6px;
  /* Sheets: mobile/components/companion/teaching/Workshop.tsx WsSheet (top corners 30) */
  --radius-sheet: 30px;

  /* Layout: mobile/lib/layout.ts READING_MAX 680, PAGE_MAX 760, PAGE_MAX_WIDE 1040 */
  --reading-max: 680px;
  --page-max: 1040px;
  --gutter: 20px;
}