/* ==========================================================
   the palette, the type scale, the spacing, the shapes: one place

   Every page links this file (index, help, guest, kid, share, privacy, terms),
   so a colour changes once. Before, the same palette was pasted into seven
   files and had already drifted in two: the legal pages were still lilac with
   no dark mode, and help had secondary text at 2.6:1.

   Light is the default; the dark values are a media rule, which the page can
   retune in place for a manual choice (app/theme.js looks for exactly this
   shape), so there is one dark palette and nothing to keep in step.

   A test (tests/tokens.test.js) fails if a page defines a colour of its own
   instead of asking this file for it.
   ========================================================== */
:root{
  color-scheme:light dark;

  /* Earth, not ice: sand for the page, cream for what lies on it, clay for what is
     pressed into it, and a deep sage where the page wants a voice. Every ink is a
     brown, never a grey, so nothing on the page reads as cold. */
  --paper:#F2EADC; --surface:#FAF5EA; --surface-2:#E9DDC8; --line:#D8C9AF;
  --chalk:#CDBB9C;   /* the dotted rule between two lines of writing */
  /* ink-3 carries hints and timestamps, so it has to pass WCAG AA (4.5:1) on the
     page and on surface-2; tests/tokens.test.js checks every pair. */
  --ink:#352D25; --ink-2:#5C4F42; --ink-3:#6A5C4F;

  /* palette drawn from the logo's two hands, muted into the earth: sage and dusty blue,
     with clay, ochre, plum and lichen beside them. Each colour comes as a fill, a tint
     for a background and an ink for text. */
  --a:#9DB394;     --a-ink:#476043;     --a-tint:#E8EDDD;     /* sage hand */
  --b:#9DB3C4;     --b-ink:#3F607A;     --b-tint:#E4ECEF;     /* dusty-blue hand */
  --pink:#D9A08E;  --pink-ink:#94503E;  --pink-tint:#F6E6DC;  /* clay rose */
  --amber:#E2B15C; --amber-ink:#7A5614;
  /* more hands: a household with children needs colours that sit beside the two
     adults without shouting over them, so these are the same weight, muted */
  --plum:#BFA3B5;  --plum-ink:#6A4860;  --plum-tint:#F1E7EC;
  --mint:#A9C4B0;  --mint-ink:#3C6652;  --mint-tint:#E3EEE5;  /* lichen */
  --sand:#DDBF93;  --sand-ink:#775627;  --sand-tint:#F5EBD8;
  --wood:#8A6A47;  --wood-lit:#C8A57B;                       /* bark: the branch the week planner grows */
  --alert:#9F4630; --ok:#476043;                              /* terracotta */
  --ink-on-pastel:#26382A;

  /* a button is the head's sage, a shade deeper, with dark ink; solid fills are deep sage; the head of every screen is a lighter, softer sage with dark ink
     on it, like a leaf held up to the light */
  --deep:#3F5443;
  --btn-bg:#97AE8F; --btn-ink:#22261E;
  --hero-bg:#A9BDA1; --hero-ink:#2B2A24; --hero-dim:rgba(43,42,36,.8);
  /* the sky behind the greeting, two stops per part of the day: pale blue in the
     morning, the sage at noon, a sunset in the evening, dusk at night. The
     greeting's ink is the same on all of them, so each stop is checked against it */
  --sky-m1:#BCD0DC; --sky-m2:#C6D6BF; --sky-n1:#A9BDA1; --sky-n2:#B7C7A6;
  --sky-e1:#E6BE9F; --sky-e2:#D2AEB9; --sky-d1:#AAB4C6; --sky-d2:#B4BFA8;
  /* the light on the paper while the app opens (app/opening.js): a morning sun from the top
     corner, an evening glow from below, a dimmer night, and its stars */
  --glow-m:rgba(255,236,190,.55); --glow-e:rgba(236,160,110,.38); --glow-d:rgba(70,86,120,.22); --star:#B9A47E;
  /* a floating layer that lets the page show through, blurred */
  --glass:color-mix(in oklab,var(--surface) 72%,transparent); --glass-blur:saturate(1.4) blur(18px);

  /* the chosen option is sage, the rest sand: every either/or says which is on the same way */
  --pick-on:#D5E0C4; --pick-on-ink:#2E4430; --pick-off:#EADFCB; --pick-off-ink:#64553F;
  /* how a month is going: cool while there is room, ochre near the target, clay past it */
  --cold:#8FB0BF; --warm:#E5B25D; --hot:#D9684E;

  /* ---------- type ----------
     Rubik for the page, light; Gveret Levin, a marker hand, for what a person would have
     written on it. Six sizes and nothing between them (there were twenty-two once, four
     of them within a pixel and a half of each other). Served from fonts/. */
  --font-body:'Rubik',system-ui,-apple-system,sans-serif;
  --font-hand:'Gveret Levin','Rubik',system-ui,sans-serif;
  --font-display:var(--font-hand);
  /* --fs is the reader's own size, per phone (app/textsize.js): every size of
     text in the app is a multiple of it, so one setting moves all of them. */
  --fs:1;
  --t-hero:calc(30px * var(--fs));     /* the one big thing on a screen */
  --t-title:calc(21px * var(--fs));    /* a card or a sheet's own heading */
  --t-body:calc(16px * var(--fs));     /* what you actually read */
  --t-sub:calc(14px * var(--fs));      /* underneath something */
  --t-tiny:calc(12.5px * var(--fs));   /* a count, a timestamp */
  --t-caps:calc(12px * var(--fs));     /* the small label over a section */

  /* spacing, so padding stops being invented per component */
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:24px; --s6:32px;

  /* ---------- pebbles ----------
     Nothing here is a rectangle with its corners sanded. Each shape is wider at one
     corner than the opposite one, in both directions, so it reads as a stone that was
     set down rather than a box that was drawn. Four sizes: a big one for a page of
     writing, three for things the size of a card, and a small one for tiles and fields.
     Neighbours take different ones (see the nth-child rules in index.html). */
  --pebble-big:46px 34px 54px 30px / 34px 50px 34px 48px;
  --pebble-1:38px 28px 40px 24px / 28px 38px 26px 36px;
  --pebble-2:26px 38px 28px 42px / 36px 26px 40px 28px;
  --pebble-3:42px 26px 32px 34px / 26px 42px 34px 28px;
  --pebble-field:18px 13px 19px 12px / 17px 13px 18px 14px;
  --pebble-btn:30px 20px 34px 18px / 28px 26px 30px 24px;
  --pebble-round:54% 46% 52% 48% / 47% 55% 45% 53%;
  --pebble-sm:20px 15px 22px 13px / 15px 21px 13px 19px;
  --pebble-nav:36px 30px 38px 28px / 34px 38px 30px 36px;
  --pebble-hero:40px 30px 58px 46px / 32px 38px 54px 60px;
  --r:16px; --r-sm:12px; --r-hero:28px; --r-card:22px; --r-pill:999px;

  /* soft, spread, in layers: paper and cloth lying one on another, not a card with a
     hard drop under it */
  --shadow:0 1px 1px rgba(84,62,40,.04), 0 4px 10px -3px rgba(84,62,40,.07), 0 16px 34px -14px rgba(84,62,40,.16);
  --shadow-lift:0 2px 3px rgba(84,62,40,.05), 0 10px 22px -6px rgba(84,62,40,.11), 0 30px 60px -20px rgba(84,62,40,.24);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:74px;

  /* recycled paper: a fine grain and a few long fibres, tiled, barely there */
  --paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.471 0 0 0 0 0.361 0 0 0 0 0.235 0 0 0 0.3 -0.150'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .35' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.471 0 0 0 0 0.361 0 0 0 0 0.235 0 0 0 0.2 -0.100'/%3E%3C/filter%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 .03' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.471 0 0 0 0 0.361 0 0 0 0 0.235 0 0 0 0.2 -0.100'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' transform='rotate(23 130 130)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23h)' transform='rotate(-31 130 130)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1E1915; --surface:#28221C; --surface-2:#352D25; --line:#4E4336; --chalk:#66594A;
    --ink:#F1E8DA; --ink-2:#C4B5A2; --ink-3:#AA9B8A;
    --a-ink:#B5CBA9;     --a-tint:#2E352B;
    --b-ink:#A9C0D0;     --b-tint:#2A3238;
    --pink:#D99C88;      --pink-ink:#E6A996;   --pink-tint:#3A2B26;
    --amber-ink:#E8BE6E;
    --plum-ink:#CDB0C3;  --plum-tint:#33292F;
    --mint-ink:#AFD0BB;  --mint-tint:#283529;
    --sand-ink:#E2C79C;  --sand-tint:#352C21;
    --wood:#6B543E;      --wood-lit:#A3876A;
    --alert:#E58E72;     --ok:#B5CBA9;
    --deep:#B5CBA9;
    --btn-bg:#A9C29F;    --btn-ink:#22301F;
    --hero-bg:#35483B;   --hero-ink:#F1E8DA;   --hero-dim:rgba(241,232,218,.86);
    --sky-m1:#2E4352; --sky-m2:#35483B; --sky-n1:#35483B; --sky-n2:#3B4D35;
    --sky-e1:#5C3D2F; --sky-e2:#4B3647; --sky-d1:#222B3A; --sky-d2:#2D3A33;
    --glow-m:rgba(150,180,210,.16); --glow-e:rgba(200,120,80,.2); --glow-d:rgba(10,14,30,.35); --star:#D8C9A8;
    --pick-on:#4A6648;   --pick-on-ink:#EAF3E2; --pick-off:#342C22; --pick-off-ink:#DDCDB4;
    --shadow:0 1px 1px rgba(0,0,0,.25), 0 4px 10px -3px rgba(0,0,0,.3), 0 16px 34px -14px rgba(0,0,0,.5);
    --shadow-lift:0 2px 3px rgba(0,0,0,.3), 0 10px 22px -6px rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.6);
    --paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1.0 0 0 0 0 0.941 0 0 0 0 0.843 0 0 0 0.05 -0.025'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .35' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1.0 0 0 0 0 0.941 0 0 0 0 0.843 0 0 0 0.035 -0.018'/%3E%3C/filter%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.3 .03' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1.0 0 0 0 0 0.941 0 0 0 0 0.843 0 0 0 0.035 -0.018'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' transform='rotate(23 130 130)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23h)' transform='rotate(-31 130 130)'/%3E%3C/svg%3E");
  }
}