/* ============================================================
   DigiCampo — brand layer (green identity)
   Token values are the verified green block from FRONTEND_SPEC.md
   §3.1 (existing tokens — do not change these values) and §3.2
   (additive tokens). Stored as raw HSL triplets, shadcn-style, so
   the two product apps and this page stay on one palette.
   Rebranding is a three-token change: --primary, --header, --ring.
   ============================================================ */

:root{
  /* ---- §3.1 — the brand. Do not change these values. ---- */
  --primary:            142 72% 29%;   /* #157f3c — primary action, active state, focus ring */
  --primary-foreground: 150 30% 97%;
  --header:             152 45% 17%;   /* #183f2d — the single branded chrome bar, both themes */
  --header-foreground:  150 30% 97%;
  --background:         150 25% 98%;   /* neutrals are faintly green-tinted, not grey */
  --foreground:         156 22% 11%;
  --card:               0 0% 100%;
  --card-foreground:    156 22% 11%;
  --muted:              150 20% 96%;
  --muted-foreground:   150 8% 40%;    /* secondary text */
  --warning:            32 90% 40%;    /* amber — out of range but not blocking */
  --info:               200 85% 38%;   /* sky — neutral information */
  --destructive:        0 84.2% 60.2%; /* blocking error, over-capacity */
  --border:             150 16% 90%;
  --input:              150 16% 90%;
  --ring:               142 72% 29%;
  --radius:             0.5rem;

  /* ---- §3.2 — additive. Milk state, capacity, sync, stop status ---- */
  --reading-normal: 142 72% 29%;
  --reading-low:    200 85% 38%;
  --reading-high:   32 90% 40%;
  --reading-out:    0 84.2% 60.2%;

  --capacity-ok:    142 72% 29%;
  --capacity-near:  32 90% 40%;   /* >=85% of chamber capacity */
  --capacity-full:  0 84.2% 60.2%; /* >=97% — the next stop will not fit */

  --sync-synced:  142 72% 29%;
  --sync-pending: 32 90% 40%;
  --sync-failed:  0 84.2% 60.2%;

  --stop-done:    142 72% 29%;
  --stop-now:     152 45% 17%;    /* the header green — "you are here" */
  --stop-pending: 150 8% 40%;
  --stop-skipped: 150 8% 55%;

  /* ---- type ---- */
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* Chrome and hero surfaces are dark in both themes — the header green is the
   brand's one constant. On those surfaces --primary lifts to its dark value so
   it keeps >=4.5:1 against the ground. */
.on-dark{
  --primary:            142 58% 52%;   /* #3ecc72 */
  --foreground:         150 30% 97%;
  --muted-foreground:   150 12% 72%;
  --border:             152 20% 26%;
  --card:               152 30% 13%;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:var(--font-sans);
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.03em;line-height:1.05;text-wrap:balance;}
p{margin:0;}
a{color:hsl(var(--primary));text-decoration:none;}
img{max-width:100%;}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:4px;}
.on-dark :focus-visible{outline-color:hsl(var(--primary));}
.num{font-variant-numeric:tabular-nums;}

/* ---------- type scale ---------- */
.display{font-family:var(--font-display);font-weight:700;font-size:clamp(52px,10.5vw,132px);
  letter-spacing:-.04em;line-height:.92;}
.h1{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.035em;}
.h2{font-size:clamp(25px,3.2vw,38px);letter-spacing:-.032em;}
.h3{font-size:20px;letter-spacing:-.02em;}
.lede{font-size:17px;color:hsl(var(--muted-foreground));line-height:1.6;max-width:66ch;}
.body{font-size:15px;line-height:1.65;max-width:70ch;}
.meta{font-size:12.5px;color:hsl(var(--muted-foreground));}

/* ---------- eyebrow : green dot + tracked caps ---------- */
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:hsl(var(--primary));display:flex;align-items:flex-start;gap:.85em;line-height:1.5;}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:.42em;
  background:hsl(var(--primary));flex:none;}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-sans);font-weight:600;font-size:14.5px;line-height:1;
  border-radius:calc(var(--radius) * 1.25);padding:13px 22px;border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .18s,border-color .18s,color .18s,transform .18s;}
a.btn-primary,.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));}
a.btn-primary:hover,.btn-primary:hover{background:hsl(142 72% 24%);transform:translateY(-1px);}
.on-dark a.btn-primary:hover{background:hsl(142 58% 60%);}
.on-dark a.btn-primary{color:hsl(152 45% 12%);}
a.btn-ghost,.btn-ghost{background:transparent;color:hsl(var(--foreground));border-color:hsl(var(--border));}
a.btn-ghost:hover{border-color:hsl(var(--primary));color:hsl(var(--primary));}

/* ---------- surfaces ---------- */
.card{background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:24px;}
.rule{border:none;border-top:1px solid hsl(var(--border));margin:0;}

/* ---------- stat tile ---------- */
.stat{border:1px solid hsl(var(--border));border-radius:var(--radius);padding:16px 18px;
  background:hsl(var(--card));}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:hsl(var(--primary));}
.stat .v{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.025em;
  margin-top:9px;font-variant-numeric:tabular-nums;color:hsl(var(--foreground));}
.stat .sub{font-size:11.5px;color:hsl(var(--muted-foreground));margin-top:6px;line-height:1.5;}

/* ---------- reading tile — the border carries the state, not the text ---------- */
.reading{border:2px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--card));padding:14px 16px;text-align:center;}
.reading[data-state=normal]{border-color:hsl(var(--reading-normal));}
.reading[data-state=low]   {border-color:hsl(var(--reading-low));}
.reading[data-state=high]  {border-color:hsl(var(--reading-high));}
.reading[data-state=out]   {border-color:hsl(var(--reading-out));}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;
  border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;}
.tbl th,.tbl td{padding:14px 16px;text-align:left;}
.tbl thead th{background:hsl(var(--header));color:hsl(var(--header-foreground));
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.tbl thead th.impact{background:hsl(var(--primary));}
.tbl tbody td{border-top:1px solid hsl(var(--border));background:hsl(var(--card));
  color:hsl(var(--muted-foreground));}
.tbl tbody td:first-child{color:hsl(var(--foreground));font-weight:600;}
.tbl tbody td.impact{color:hsl(142 72% 24%);font-weight:600;background:hsl(142 45% 96%);}

/* ---------- bullet list ---------- */
.list{margin:12px 0 0;padding:0;list-style:none;}
.list li{font-size:14px;line-height:1.5;padding-left:20px;position:relative;margin-bottom:8px;}
.list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:hsl(var(--primary));}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}