/* stockroom -- tokens. Light only by design (the user doesn't run dark
   mode); color-scheme says so, so form controls stay light too. Every
   colour a view uses is a token here; views never write a hex. */

:root {
  color-scheme: light;

  /* paper + ink */
  --paper:    #F3F1EC;   /* warm stone: the page */
  --paper-2:  #EAE7E0;   /* recessed: tracks, search fields, pads */
  --paper-3:  #E1DDD4;
  --card:     #FFFFFF;
  --ink:      #17181C;
  --ink-2:    #3A3D45;
  --muted:    #6D7079;
  --faint:    #9B9DA3;
  --line:     #E6E2DA;
  --line-2:   #D5D0C5;

  /* the one brand colour: ultramarine */
  --brand:      #2A45C9;
  --brand-ink:  #1C3197;
  --brand-tint: #E9EDFC;
  --brand-mid:  #B9C5F4;

  /* meaning, and only meaning */
  --ok:        #1B8A57;  --ok-tint:   #E2F2E9;  --ok-mid:   #9FD3B8;
  --warn:      #C27C06;  --warn-tint: #FAEFD7;  --warn-mid: #EFCB85;
  --bad:       #CC3B33;  --bad-tint:  #FBE5E3;  --bad-mid:  #EFA9A4;
  --info:      #2477C2;  --info-tint: #E2EEF9;  --info-mid: #A6C8EA;

  /* quiet hues for categories and people (avatar backgrounds + inks) */
  --h0-bg: #ECE7FB; --h0-fg: #5B40C4;   /* violet -- peptides */
  --h1-bg: #DFF2F2; --h1-fg: #11777F;   /* teal -- supplies */
  --h2-bg: #F1ECE4; --h2-fg: #6F6253;   /* stone -- other */
  --h3-bg: #FCE8E2; --h3-fg: #B24A2E;   /* clay */
  --h4-bg: #E4EEFB; --h4-fg: #2C62A8;   /* sky */
  --h5-bg: #F9EDD4; --h5-fg: #946205;   /* honey */
  --h6-bg: #E6F3E3; --h6-fg: #3D7A2E;   /* sage */
  --h7-bg: #F8E6F0; --h7-fg: #A33A74;   /* berry */

  /* type */
  --f-ui:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* shape + depth */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --sh-1: 0 1px 0 rgba(23, 24, 28, .03), 0 1px 3px rgba(23, 24, 28, .05);
  --sh-2: 0 2px 6px rgba(23, 24, 28, .05), 0 10px 28px rgba(23, 24, 28, .08);
  --sh-3: 0 -8px 40px rgba(23, 24, 28, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* layout */
  --tabbar-h: 58px;
  --rail-w:   92px;
  --gutter:   16px;
  --safe-b:   env(safe-area-inset-bottom, 0px);
  --safe-t:   env(safe-area-inset-top, 0px);
}

/* hue helpers: .hue-0 .. .hue-7 set --hb / --hf for whatever uses them */
.hue-0 { --hb: var(--h0-bg); --hf: var(--h0-fg); }
.hue-1 { --hb: var(--h1-bg); --hf: var(--h1-fg); }
.hue-2 { --hb: var(--h2-bg); --hf: var(--h2-fg); }
.hue-3 { --hb: var(--h3-bg); --hf: var(--h3-fg); }
.hue-4 { --hb: var(--h4-bg); --hf: var(--h4-fg); }
.hue-5 { --hb: var(--h5-bg); --hf: var(--h5-fg); }
.hue-6 { --hb: var(--h6-bg); --hf: var(--h6-fg); }
.hue-7 { --hb: var(--h7-bg); --hf: var(--h7-fg); }

/* tone helpers: .tone-ok etc set --t / --tt / --tm (solid, tint, mid) */
.tone-ok    { --t: var(--ok);    --tt: var(--ok-tint);    --tm: var(--ok-mid); }
.tone-warn  { --t: var(--warn);  --tt: var(--warn-tint);  --tm: var(--warn-mid); }
.tone-bad   { --t: var(--bad);   --tt: var(--bad-tint);   --tm: var(--bad-mid); }
.tone-info  { --t: var(--info);  --tt: var(--info-tint);  --tm: var(--info-mid); }
.tone-brand { --t: var(--brand); --tt: var(--brand-tint); --tm: var(--brand-mid); }
.tone-muted { --t: var(--muted); --tt: var(--paper-2);    --tm: var(--line-2); }