/* Home design system: tokens and a minimal base.
   Shared by every home app on *.flamingbeing.com (served at /homedesign/). Calm and minimal, light only.
   Web pages add web.css (h- classes); phone apps add app.css + app.js (ha- classes). DESIGN.md and DESIGN-APP.md
   explain every value. Every colour is a custom property, so a dark set could be added later as one block. */

:root{
  color-scheme:light;

  /* ---------- Colour ---------- */
  /* grounds and surfaces: near-white and soft greys */
  --home-bg:#f5f5f7;            /* page and grouped-list ground */
  --home-surface:#ffffff;       /* cards, rows, sheets, inputs */
  --home-surface-2:#fafafb;     /* quiet panel on a white page */
  --home-fill:#ececf0;          /* tracks, skeletons, segmented and search backgrounds */
  --home-fill-strong:#e3e3e8;   /* switch track (off), progress track on fill */
  --home-pressed:#ebebef;       /* press fill on a surface */
  --home-pressed-bg:#e4e4e9;    /* press fill on the ground */

  /* text */
  --home-ink:#1d1d1f;           /* headings and body */
  --home-ink-2:#3c3c43;         /* secondary copy close to ink */
  --home-muted:#636368;         /* subtitles, captions, footers, inactive tabs */
  --home-placeholder:#636368;   /* input placeholders: as muted, so 4.5:1 on fill too */

  /* lines */
  --home-line:#e3e3e8;          /* hairlines between rows, card edges: decorative */
  --home-line-strong:#8a8a91;   /* link underlines, chevrons */
  --home-control:#8a8a91;       /* borders of controls and inputs (3:1 on white and ground) */

  /* the one accent: slate blue */
  --home-accent:#3a6390;        /* links, primary buttons, selected states, focus ring */
  --home-accent-press:#2d4f74;  /* pressed and hover on accent fills */
  --home-accent-soft:#e8eef5;   /* tinted buttons, selected chips, active tab pill */
  --home-accent-soft-press:#dbe4ef;
  --home-on-accent:#ffffff;     /* text on accent */

  /* status: always with a word (and a shape), never colour alone */
  --home-ok:#1e6b3c;   --home-ok-bg:#e6f2ea;
  --home-warn:#8a5300; --home-warn-bg:#fbefd9;
  --home-bad:#b3261e;  --home-bad-bg:#fbe8e6;
  --home-bad-press:#f6d8d4;

  /* toast (dark, floats) */
  --home-toast:#1d1d1f; --home-on-toast:#ffffff; --home-toast-action:#a9c6ec;

  /* floating layers */
  --home-bar:rgb(250 250 251 / .9);         /* translucent top and tab bars */
  --home-backdrop:rgb(29 29 31 / .32);       /* behind sheets */
  --home-focus:var(--home-accent);

  /* Contrast pairs (WCAG 2.2): checked by test/contrast.test.mjs. Format: @pair <fg> on <bg> >= <min> (<ratio>)
     Text needs 4.5, controls and focus rings 3.
     @pair ink on surface >= 4.5 (16.8)
     @pair ink on bg >= 4.5 (15.5)
     @pair ink on accent-soft >= 4.5 (14.4)
     @pair ink-2 on surface >= 4.5 (10.9)
     @pair ink-2 on bg >= 4.5 (10.1)
     @pair muted on surface >= 4.5 (6.0)
     @pair muted on bg >= 4.5 (5.5)
     @pair muted on fill >= 4.5 (5.1)
     @pair muted on accent-soft >= 4.5 (5.1)
     @pair placeholder on surface >= 4.5 (6.0)
     @pair placeholder on fill >= 4.5 (5.1)
     @pair accent on surface >= 4.5 (6.2)
     @pair accent on bg >= 4.5 (5.7)
     @pair accent on fill >= 4.5 (5.3)
     @pair accent on accent-soft >= 4.5 (5.3)
     @pair on-accent on accent >= 4.5 (6.2)
     @pair on-accent on accent-press >= 4.5 (8.5)
     @pair ok on ok-bg >= 4.5 (5.7)
     @pair ok on surface >= 4.5 (6.5)
     @pair warn on warn-bg >= 4.5 (5.6)
     @pair warn on surface >= 4.5 (6.3)
     @pair bad on bad-bg >= 4.5 (5.5)
     @pair bad on surface >= 4.5 (6.5)
     @pair bad on bad-press >= 4.5 (4.9)
     @pair on-toast on toast >= 4.5 (16.8)
     @pair toast-action on toast >= 4.5 (9.6)
     @pair control on surface >= 3 (3.4)
     @pair control on bg >= 3 (3.2)
     @pair line-strong on surface >= 3 (3.4)
     @pair focus on surface >= 3 (6.2)
     @pair focus on bg >= 3 (5.7)
     @pair accent on fill-strong >= 3 (4.9)
  */

  /* ---------- Type ---------- */
  /* The phone's own font. No font files. */
  --home-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --home-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Sizes are rem so they follow the reader's text size. --home-root is the root size in px: 16 on the web, 17 in
     the app kit (app.css sets it), so each token is exactly the px in its name at default text size. */
  --home-root:16;
  --home-t-display:calc(40rem / var(--home-root));  /* web page title (clamped down on phones) */
  --home-t-large:calc(34rem / var(--home-root));    /* app large title */
  --home-t-title1:calc(28rem / var(--home-root));   /* web h2, big numbers */
  --home-t-title2:calc(22rem / var(--home-root));   /* app card and empty-state titles, web h3 */
  --home-t-title3:calc(20rem / var(--home-root));   /* web lead */
  --home-t-body:calc(17rem / var(--home-root));     /* body everywhere; headline is body at 600 */
  --home-t-small:calc(16rem / var(--home-root));    /* the floor for any sentence: subtitles, footers, toasts, inputs */
  --home-t-label:calc(13rem / var(--home-root));    /* short labels only: tab labels, section headers, badges */
  --home-lh:1.47;          /* body line height */
  --home-lh-read:1.6;      /* long reading */
  --home-lh-tight:1.2;     /* titles */

  /* ---------- Space: a 4px grid ---------- */
  --home-s1:4px; --home-s2:8px; --home-s3:12px; --home-s4:16px; --home-s5:20px; --home-s6:24px;
  --home-s8:32px; --home-s10:40px; --home-s12:48px; --home-s16:64px;
  --home-gutter:16px;      /* side gutter on phones; 24px from 768px */

  /* ---------- Radii ---------- */
  --home-r-xs:6px;         /* badges */
  --home-r-sm:8px;         /* row thumbnails, segment thumb */
  --home-r-md:12px;        /* buttons, inputs, toasts, panels */
  --home-r-lg:16px;        /* grouped lists, cards */
  --home-r-xl:24px;        /* sheet top corners */
  --home-r-full:999px;     /* pills, chips, switches */

  /* ---------- Elevation: only for things that float ---------- */
  --home-shadow-card:0 1px 2px rgb(29 29 31 / .04),0 1px 1px rgb(29 29 31 / .03);
  --home-shadow-thumb:0 1px 2px rgb(29 29 31 / .12),0 2px 6px rgb(29 29 31 / .06);
  --home-shadow-float:0 10px 32px rgb(29 29 31 / .16),0 2px 6px rgb(29 29 31 / .06);

  /* ---------- Motion ---------- */
  --home-ease:cubic-bezier(.2,0,0,1);          /* standard */
  --home-ease-out:cubic-bezier(.05,.7,.1,1);   /* arriving */
  --home-ease-in:cubic-bezier(.3,0,.8,.15);    /* leaving */
  --home-ease-ios:cubic-bezier(.32,.72,0,1);   /* sheets, pushes, switch knob */
  --home-d-press:90ms; --home-d-fast:150ms; --home-d-med:250ms; --home-d-push:350ms; --home-d-sheet:420ms;
}
@media (prefers-reduced-motion:reduce){
  :root{--home-d-press:0ms;--home-d-fast:1ms;--home-d-med:1ms;--home-d-push:1ms;--home-d-sheet:1ms}
}
@media (min-width:768px){:root{--home-gutter:24px}}

/* ---------- Minimal base (low specificity, so web.css and app.css win) ---------- */
:where(*,*::before,*::after){box-sizing:border-box}
:where(html){-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(body){margin:0;background:var(--home-bg);color:var(--home-ink);font-family:var(--home-font);
  font-size:var(--home-t-body);line-height:var(--home-lh);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:where(img,svg,video){max-width:100%;height:auto}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(input,select,textarea){font-size:max(16px,1em)}          /* never under 16px: iOS zooms into smaller inputs */
:where(:focus){outline:none}
:where(:focus-visible){outline:2px solid var(--home-focus);outline-offset:2px}
:where(code,kbd,samp,pre){font-family:var(--home-mono);font-size:.94em}
/* the hidden attribute always hides, whatever a component's display */
[hidden]{display:none!important}
.home-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.home-icon{display:inline-block;flex:none;width:24px;height:24px;vertical-align:middle;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.home-num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  :where(*,*::before,*::after){animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}