/* Waffles' window — design tokens.
   Every colour, size and font the viewer uses lives here. viewer.css only
   refers to these names. Light is the default; the cocoa night set applies
   when the visitor's system prefers dark (and can be forced either way with
   <html data-theme="light|dark">). See DESIGN.md. */

:root {
  color-scheme: light;

  /* paper & ink */
  --paper: #F6ECD9;        /* the sheet / side panel */
  --paper-2: #EEE0C4;      /* chat bar, inset fields */
  --card: #FFFBF2;         /* a journal page, the header pill */
  --card-2: #FBF3E2;       /* chips, letters, notes inside a page */
  --ink: #3B2E27;
  --ink-2: #6E5B4E;
  --muted: #8A786A;
  --line: #E3D3B6;
  --line-soft: #EDE1CB;

  /* the four accents, each with one job */
  --terracotta: #D5724A;   /* hunger, calls to action, the send button */
  --terracotta-soft: #F7D9C8;
  --on-terracotta: #FFF8EE;
  --honey: #E8B04B;        /* tiredness, the running step, waiting */
  --honey-ink: #B07A22;    /* honey as text on cream */
  --honey-soft: #F8E7BF;
  --sage: #7E9F6E;         /* done, rested, fine */
  --sage-ink: #5E7F4F;
  --sage-soft: #DCE8CF;
  --rose: #EFA49C;         /* his cheeks only */
  --alarm: #B8433A;        /* starving, exhausted, sick */
  --alarm-soft: #F3D2CC;

  /* his fur */
  --fur: #EBCB92;
  --fur-light: #F6E3BC;
  --fur-dark: #C9A067;

  /* the world behind everything, before three.js paints */
  --sky: #D9EBF6;
  --tag-bg: rgba(59, 46, 39, .78);
  --tag-ink: #FFF8EE;

  --shadow: 0 12px 32px rgba(84, 58, 32, .16);
  --shadow-soft: 0 4px 14px rgba(84, 58, 32, .10);
  --shadow-sheet: 0 -10px 40px rgba(60, 40, 20, .22);
  --focus: #4B86C9;

  /* moods — <body data-mood="…"> picks one into --mood */
  --mood-happy: #E8B04B;
  --mood-content: #7E9F6E;
  --mood-curious: #5E9BD1;
  --mood-proud: #D5724A;
  --mood-playful: #E88A3C;
  --mood-frustrated: #C9533E;
  --mood-sad: #8D8FC9;
  --mood-lonely: #8D8FC9;
  --mood-scared: #9A7FB5;
  --mood-tired: #A98FCF;
  --mood: var(--mood-content);

  /* need levels — [data-level="…"] picks one into --level */
  --need-fine: var(--sage-ink);
  --need-rested: var(--sage-ink);
  --need-hungry: var(--honey-ink);
  --need-sleepy: var(--honey-ink);
  --need-very-hungry: var(--terracotta);
  --need-very-tired: var(--terracotta);
  --need-starving: var(--alarm);
  --need-exhausted: var(--alarm);
  --need-sick: var(--alarm);
  --need-asleep: var(--mood-tired);

  /* type */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Nunito', 'Avenir Next', system-ui, sans-serif;
  --fs-name: 22px;       /* his name in the pill */
  --fs-goal: 22px;       /* the goal in the Right-now strip */
  --fs-title: 24px;      /* a page title */
  --fs-mood: 34px;       /* the mood word */
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-meta: 13px;
  --lh: 1.45;

  /* layout */
  --gutter: 16px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --pill-h: 52px;
  --pill-top: calc(12px + var(--safe-t));
  --chat-h: 76px;
  --peek-h: 140px;
  --sheet-gap: 12px;
  --sheet-top-full: calc(var(--pill-top) + var(--pill-h) + var(--sheet-gap));
  --sheet-top-half: 52%;
  --radius: 22px;
  --radius-sheet: 28px;
  --panel-w: 400px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .38s;
}

@media (min-width: 1280px) {
  :root { --panel-w: 420px; }
}

/* ---- night: cocoa paper, the same four accents a touch brighter ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #241D19;
    --paper-2: #1C1613;
    --card: #302722;
    --card-2: #382E28;
    --ink: #F3E8D6;
    --ink-2: #CFBEA8;
    --muted: #A8978A;
    --line: #4A3D34;
    --line-soft: #3D322B;
    --terracotta: #E68C63;
    --terracotta-soft: #4A2E22;
    --on-terracotta: #2A1A12;
    --honey: #ECB85A;
    --honey-ink: #E6B457;
    --honey-soft: #4A3A1E;
    --sage: #94B483;
    --sage-ink: #9DBE8C;
    --sage-soft: #2F3B2A;
    --rose: #D98A84;
    --alarm: #E07268;
    --alarm-soft: #4A2724;
    --fur: #E1BC7E;
    --fur-light: #EDD4A4;
    --fur-dark: #B38A55;
    --sky: #141B33;
    --tag-bg: rgba(243, 232, 214, .88);
    --tag-ink: #241D19;
    --shadow: 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-soft: 0 4px 14px rgba(0, 0, 0, .35);
    --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .5);
    --focus: #8FC0F0;
    --mood-happy: #F0C063;
    --mood-content: #9DBE8C;
    --mood-curious: #7FB4E4;
    --mood-proud: #E68C63;
    --mood-playful: #F0A05A;
    --mood-frustrated: #E07268;
    --mood-sad: #A6A8DC;
    --mood-lonely: #A6A8DC;
    --mood-scared: #B49CCF;
    --mood-tired: #BBA6DF;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #241D19;
  --paper-2: #1C1613;
  --card: #302722;
  --card-2: #382E28;
  --ink: #F3E8D6;
  --ink-2: #CFBEA8;
  --muted: #A8978A;
  --line: #4A3D34;
  --line-soft: #3D322B;
  --terracotta: #E68C63;
  --terracotta-soft: #4A2E22;
  --on-terracotta: #2A1A12;
  --honey: #ECB85A;
  --honey-ink: #E6B457;
  --honey-soft: #4A3A1E;
  --sage: #94B483;
  --sage-ink: #9DBE8C;
  --sage-soft: #2F3B2A;
  --rose: #D98A84;
  --alarm: #E07268;
  --alarm-soft: #4A2724;
  --fur: #E1BC7E;
  --fur-light: #EDD4A4;
  --fur-dark: #B38A55;
  --sky: #141B33;
  --tag-bg: rgba(243, 232, 214, .88);
  --tag-ink: #241D19;
  --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .5);
  --focus: #8FC0F0;
  --mood-happy: #F0C063;
  --mood-content: #9DBE8C;
  --mood-curious: #7FB4E4;
  --mood-proud: #E68C63;
  --mood-playful: #F0A05A;
  --mood-frustrated: #E07268;
  --mood-sad: #A6A8DC;
  --mood-lonely: #A6A8DC;
  --mood-scared: #B49CCF;
  --mood-tired: #BBA6DF;
}

/* ---- state → variable bindings (the poller only sets attributes) ---- */
body[data-mood="happy"]      { --mood: var(--mood-happy); }
body[data-mood="content"]    { --mood: var(--mood-content); }
body[data-mood="curious"]    { --mood: var(--mood-curious); }
body[data-mood="proud"]      { --mood: var(--mood-proud); }
body[data-mood="playful"]    { --mood: var(--mood-playful); }
body[data-mood="frustrated"] { --mood: var(--mood-frustrated); }
body[data-mood="sad"]        { --mood: var(--mood-sad); }
body[data-mood="lonely"]     { --mood: var(--mood-lonely); }
body[data-mood="scared"]     { --mood: var(--mood-scared); }
body[data-mood="tired"]      { --mood: var(--mood-tired); }

[data-level="fine"]        { --level: var(--need-fine); }
[data-level="rested"]      { --level: var(--need-rested); }
[data-level="hungry"]      { --level: var(--need-hungry); }
[data-level="sleepy"]      { --level: var(--need-sleepy); }
[data-level="very_hungry"] { --level: var(--need-very-hungry); }
[data-level="very_tired"]  { --level: var(--need-very-tired); }
[data-level="starving"]    { --level: var(--need-starving); }
[data-level="exhausted"]   { --level: var(--need-exhausted); }
[data-level="sick"]        { --level: var(--need-sick); }
[data-level="asleep"]      { --level: var(--need-asleep); }

/* his face: which mouth / eyes the shared <symbol id="i-face"> shows.
   The <use> shadow tree inherits these, so one symbol serves every mood. */
body { --mouth-smile: 1; --mouth-flat: 0; --mouth-frown: 0; --eyes-open: 1; --eyes-closed: 0; --brows: 0; }
body[data-mood="content"], body[data-mood="curious"], body[data-mood="tired"] { --mouth-smile: 0; --mouth-flat: 1; }
body[data-mood="frustrated"], body[data-mood="sad"], body[data-mood="lonely"], body[data-mood="scared"] { --mouth-smile: 0; --mouth-frown: 1; }
body[data-mood="frustrated"] { --brows: 1; }
body[data-sleeping="true"] { --eyes-open: 0; --eyes-closed: 1; --mouth-smile: 0; --mouth-flat: 1; --mouth-frown: 0; --brows: 0; }