/* ============================================================
   SweetLife brand v1
   Light is the default. Dark is an option, not an inversion —
   it keeps the same warm carton family rather than going slate.
   Applied via prefers-color-scheme, overridable by [data-theme].
   ============================================================ */

:root{
  --paper:#FBF7EC;  --paper2:#F3EDDD;  --card:#FFFFFF;
  --ink:#1C1A12;    --ink2:#5A5545;    --ink3:#776F5E;
  --rule:#E4DCC7;   --rule2:#CDC4AC;

  --green:#7CC142;        /* brand + in range - FILLS ONLY, never text */
  --green-text:#44781A;   /* green you can actually read - 4.97:1 on paper */
  --yellow:#F6D33C;        /* high - FILLS ONLY, ink sits on it at 11.86:1 */
  --red:#E0435C;          /* low / destructive */

  /* Companion blue - the one hue family with no glucose meaning, so it is free
     to mark things that are NOT a reading. Fill + readable twin, like green. */
  --blue:#5CB1D6;         /* fill only - ink on it at 7.23:1 */
  --blue-light:#8DC9E2;   /* light fills, and the readable blue on ink grounds */
  --blue-text:#1E5F7B;    /* blue you can read - 7.05:1 on paper */

  --on-green:#1C1A12;      /* text/icons on a green fill - constant in both themes */
  --on-blue:#1C1A12;       /* same rule: ink on a blue fill, constant */
  --header-bg:rgba(251,247,236,.92);

  /* the mark re-colours itself so it reads on either ground */
  --mark-line:#1C1A12;
  --mark-trace:#FBF7EC;

  --d:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --b:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --m:'DM Mono',ui-monospace,SFMono-Regular,monospace;

  --radius:16px;
  color-scheme:light;
}

/* --- dark: system preference, unless the user explicitly chose light --- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15130C;  --paper2:#1E1B12;  --card:#232016;
    --ink:#F6F1E3;    --ink2:#C2BBA6;    --ink3:#9A927C;
    --rule:#332E21;   --rule2:#4A4433;
    --green:#7CC142;
    --green-text:#9AD45E;
    --yellow:#F6D33C;
    --red:#EC5C72;
    --blue:#5CB1D6;
    --blue-light:#8DC9E2;
    --blue-text:#8DC9E2;
    --on-green:#1C1A12;
    --on-blue:#1C1A12;
    --header-bg:rgba(21,19,12,.92);
    --mark-line:#F6F1E3;
    --mark-trace:#15130C;
    color-scheme:dark;
  }
}

/* --- dark: explicit choice always wins --- */
:root[data-theme="dark"]{
  --paper:#15130C;  --paper2:#1E1B12;  --card:#232016;
  --ink:#F6F1E3;    --ink2:#C2BBA6;    --ink3:#9A927C;
  --rule:#332E21;   --rule2:#4A4433;
  --green:#7CC142;
  --green-text:#9AD45E;
  --yellow:#F6D33C;
  --red:#EC5C72;
  --blue:#5CB1D6;
  --blue-light:#8DC9E2;
  --blue-text:#8DC9E2;
  --on-green:#1C1A12;
  --on-blue:#1C1A12;
  --header-bg:rgba(21,19,12,.92);
  --mark-line:#F6F1E3;
  --mark-trace:#15130C;
  color-scheme:dark;
}

/* ============================================================
   Base
   ============================================================ */
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--b)}

/* ============================================================
   The mark — theme-aware, so one markup works on both grounds
   ============================================================ */
.mark{display:block;height:1em;width:auto;flex:none}
.mark .mk-line{stroke:var(--mark-line);fill:none;stroke-linecap:round;stroke-linejoin:round}
.mark .mk-body{fill:var(--green);stroke:var(--mark-line)}
.mark .mk-trace{stroke:var(--mark-trace);fill:none;stroke-linecap:round;stroke-linejoin:round}
.mark .mk-dot{fill:var(--mark-line)}

/* ============================================================
   The wordmark — i-dot is a circle 0.174em (equal area to the
   typeface's own elliptical dot), centred x 0.1425em (the stem centre) from the
   glyph origin, top edge 0.72em above the baseline.
   ============================================================ */
.wordmark{font-family:var(--d);font-weight:800;letter-spacing:-.05em;line-height:1.12;white-space:nowrap;color:var(--ink)}
.wordmark .dl{position:relative;display:inline-block}
.wordmark .dl i{position:absolute;left:.1425em;transform:translateX(-50%);top:.1515em;
  width:.174em;height:.174em;border-radius:999px;background:var(--green);display:block}

.lockup{display:inline-flex;align-items:center;gap:.36em;line-height:1.12;text-decoration:none}
.lockup>svg{flex:none;position:relative;top:-.08em;height:1.32em;width:auto}

/* ============================================================
   Theme toggle
   ============================================================ */
.theme-toggle{
  width:34px;height:34px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:var(--paper2);border:1px solid var(--rule2);border-radius:999px;color:var(--ink);
  padding:0;line-height:0;
}
.theme-toggle:hover{border-color:var(--ink3)}
/* Product-mockup row icons. Same stroke language as the mark: 24-unit box,
   2-unit stroke, round caps. Never emoji - emoji render as someone else's
   artwork at someone else's weight, and they cannot take a brand colour. */
.picon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}

.theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:block}

/* ============================================================
   The chart system
   Line stays ink, never green: green means "in range", so a green
   line would claim every reading was fine. Colour lives in the
   band and the out-of-range dots.
   ============================================================ */
.ch-band{fill:var(--green);opacity:.16}
.ch-grid{stroke:var(--rule);fill:none}
.ch-grid2{stroke:var(--rule2);fill:none}
.ch-line{stroke:var(--ink);fill:none;stroke-linecap:round;stroke-linejoin:round}
.ch-hi{fill:var(--yellow)}
.ch-lo{fill:var(--red)}
.ch-now{fill:var(--ink)}
.ch-ax{fill:var(--ink3);font-family:var(--m)}
.ch-note{fill:var(--ink2);font-family:var(--m)}
.ch-note-now{fill:var(--ink);font-family:var(--m)}