/* monitorMyLawn — design tokens.
   THE ONLY place raw hex values live. Everything else references var(--...).
   Light is default; [data-theme="dark"] overrides surfaces/text. */
:root {
  /* Brand — grass green */
  --mml-primary:        #2f8f4e;
  --mml-primary-dark:   #1f6b39;
  --mml-primary-light:  #4caf6a;
  --mml-primary-50:     #eafaf0;

  /* Secondary — irrigation blue */
  --mml-accent:         #2563eb;
  --mml-accent-dark:    #1e40af;
  --mml-accent-50:      #eff6ff;

  /* Soil neutral */
  --mml-soil:           #8b5e34;
  --mml-soil-50:        #f7f1ea;

  /* Semantic. The *-bd/*-bg pair is for fills/borders; the *-fg pair is the ONLY
     one safe for TEXT on the matching *-bg (the base hue fails AA at badge size:
     #16a34a on #ecfdf5 is 3.13:1, #3b82f6 on #eff6ff is 3.38:1). */
  --mml-success:        #16a34a; --mml-success-bg:#ecfdf5; --mml-success-bd:#86efac; --mml-success-fg:#15803d;
  --mml-warning:        #f59e0b; --mml-warning-bg:#fef3c7; --mml-warning-bd:#fcd34d; --mml-warning-fg:#92660b;
  --mml-danger:         #dc2626; --mml-danger-bg:#fef2f2; --mml-danger-bd:#fca5a5; --mml-danger-fg:#b91c1c;
  --mml-info:           #3b82f6; --mml-info-bg:#eff6ff;  --mml-info-bd:#93c5fd;  --mml-info-fg:#1d4ed8;
  --mml-frost:          #38bdf8;
  --mml-heat:           #f97316;

  /* Metric chart series colors */
  --c-soil-moist:#2563eb; --c-soil-temp:#8b5e34; --c-air-temp:#f97316;
  --c-air-humid:#0ea5e9;  --c-light:#f59e0b;     --c-rain:#1d4ed8;
  --c-battery:#16a34a;    --c-signal:#7c3aed;

  /* Text & surfaces (light) */
  --mml-text:#14241a; --mml-text-2:#5b6b61; --mml-text-muted:#94a3b8;
  --mml-bg:#f4f7f4; --mml-surface:#ffffff; --mml-surface-hover:#f7faf8;
  --mml-border:#e2e8e4;

  /* Shape & spacing */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-pill:9999px;
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:20px; --sp-2xl:24px; --sp-3xl:32px;
  --shadow-card:0 1px 3px rgba(0,0,0,.1);
  --shadow-hover:0 4px 6px rgba(0,0,0,.1);
  --shadow-modal:0 10px 25px rgba(0,0,0,.2);

  /* Layered depth scale (marketing polish). Legacy --shadow-card/hover/modal above
     stay untouched for app/admin pages. */
  --shadow-xs:0 1px 2px rgba(16,40,24,.05);
  --shadow-sm:0 1px 2px rgba(16,40,24,.05), 0 3px 10px rgba(16,40,24,.06);
  --shadow-md:0 2px 4px rgba(16,40,24,.06), 0 10px 28px rgba(16,40,24,.10);
  --shadow-lg:0 4px 10px rgba(16,40,24,.08), 0 20px 48px rgba(16,40,24,.14);
  --shadow-primary:0 2px 6px rgba(47,143,78,.28), 0 10px 24px rgba(47,143,78,.18);

  /* RGB channels — for rgba(var(--mml-*-rgb), a) translucency in other sheets. */
  --mml-primary-rgb:47,143,78;
  --mml-accent-rgb:37,99,235;
  --mml-surface-rgb:255,255,255;

  /* Marketing rhythm & accents */
  --section-pad:clamp(3rem, 2.2rem + 4vw, 5.5rem);
  --mml-heading-accent:var(--mml-primary-dark);
  /* TEXT-safe brand green. --mml-primary is a FILL colour: as body-size text it measures
     4.07:1 on --mml-surface and 3.77:1 on --mml-bg, both under WCAG AA's 4.5:1. Links are
     the most common text use of the brand colour, so they get this token instead.
     Light 6.52:1 / 6.04:1 · dark 5.87:1 / 6.60:1. */
  --mml-link:var(--mml-primary-dark);
  --mml-selection:rgba(47,143,78,.22);
  --mml-pattern-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M14 26c0-7 6-13 13-13 0 7-6 13-13 13Z' fill='%232f8f4e' fill-opacity='.05'/%3E%3Cpath d='M50 62c0-7 6-13 13-13 0 7-6 13-13 13Z' fill='%232f8f4e' fill-opacity='.05'/%3E%3C/svg%3E");

  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter",Helvetica,Arial,sans-serif;
  /* Mono carries every measured value on the marketing pages (readings, depths,
     thresholds). Serif is used ONLY for figure captions, to mark them as editorial
     apparatus rather than product copy. */
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-serif:ui-serif,Georgia,"Times New Roman",Times,serif;

  /* ════════════════════════════════════════════════════════════════════════
     EDITORIAL LAYER — added for the marketing rebuild. Every value below is
     measured, not eyeballed; the ratios in the comments are WCAG 2.1 contrast.
     ════════════════════════════════════════════════════════════════════════ */

  /* Tertiary ink. This is the SMALLEST type we ship (mono micro-labels, captions)
     so it still has to clear AA on every marketing surface:
     4.94:1 on --mml-bg · 5.33:1 on --mml-surface · 4.77:1 on --mml-sky-2.
     ── --mml-text-muted IS NOT A TEXT COLOUR ────────────────────────────────
     #94a3b8 measures 2.38:1 on --mml-bg, 2.56:1 on --mml-surface, 2.44:1 on
     --mml-surface-hover and 2.06:1 on --mml-border. (The 2.63:1 previously noted
     here was wrong; re-measured 2026-07 with the WCAG 2.1 relative-luminance
     formula, which reproduces every other figure in this file exactly.) Dark is no
     better in the places it is used: #6b7d72 is 3.68:1 on --mml-surface and 2.80:1
     on --mml-border. It fails AA for text at ANY size, in BOTH themes.
     It survives only because four call sites paint a non-text decoration with it —
     watering.css:89/114 (the calendar's "no watering needed" stripe), watering.css:150
     and app.css:305 (the neutral bar fill). Its name is the trap: if you are about to
     put GLYPHS in it, you want --mml-text-3 (4.94:1 / 6.50:1) or --mml-text-2
     (5.23:1 / 8.18:1) instead. There are ZERO text uses left in this codebase; keep
     it that way. */
  --mml-text-3:#5e6f65;
  /* Hairlines. --mml-ink-dec is DECORATIVE ONLY — never put text in it. */
  --mml-rule:#dfe7e2;
  --mml-rule-strong:#c6d2cb;
  --mml-ink-dec:#a9b8af;

  /* Accessible primary FILL for button faces. --mml-primary against white is
     4.07:1, which fails AA for a 16px button label. #287d44 measures 5.11:1 and
     is indistinguishable from the brand green at button size. */
  --mml-primary-btn:#287d44;
  --mml-primary-btn-hover:#1f6b39;
  --mml-primary-btn-ink:#ffffff;

  /* ── The earth. This is the homepage art direction: a soil cross-section. ── */
  --mml-sky-1:#f7faf6;
  --mml-sky-2:#eef4ec;
  --mml-soil-dry-a:#e8d4b2;   /* A horizon (topsoil), bone dry   */
  --mml-soil-dry-b:#dcb98c;   /* B horizon (subsoil), dry        */
  --mml-soil-dry-c:#c9b499;   /* C horizon (parent material)     */
  --mml-soil-wet-a:#38240e;
  --mml-soil-wet-b:#301d06;
  --mml-soil-wet-c:#2b2115;
  --mml-thatch:#a08f56;
  --mml-root:#efe0c0;
  --mml-root-shadow:#3a2a12;
  --mml-pebble:#a2917c;

  /* Dark closing band + footer. cream 13.55:1, cream-2 9.06:1, cream-3 7.09:1
     on --mml-earth; cream-ink 14.68:1 on --mml-cream (the inverted button). */
  --mml-earth:#2b2018;
  --mml-earth-2:#3a2b20;
  --mml-cream:#f4ece0;
  --mml-cream-2:#cfc2ae;
  --mml-cream-3:#9db39f;
  --mml-cream-ink:#211a12;
  --mml-cream-rgb:244,236,224;

  /* Grass blades (generative SVG fills, back-to-front). */
  --mml-grass-1:#1a5730; --mml-grass-2:#1f6b39; --mml-grass-3:#257640;
  --mml-grass-4:#2f8f4e; --mml-grass-5:#4caf6a; --mml-grass-6:#5fbd7c;

  /* The manufactured object (probe body, steel tines, solar cap). */
  --mml-device:#eef2ec; --mml-device-2:#cdd6cd; --mml-device-edge:#8e9a91;
  --mml-metal-1:#c7cfc9; --mml-metal-2:#8e988f;
  --mml-pv-1:#2b3f57; --mml-pv-2:#16233a;

  /* Ink drawn directly ON soil, which may be bone-dry tan or soaked near-black
     in the same figure. Always paired with --mml-soil-halo through
     `paint-order: stroke fill`, which puts a dark outline behind the glyph.
     Worst measured case (cool ink, halo, over dry topsoil) is 6.06:1. */
  --mml-soil-ink:#faf4e8;
  --mml-soil-ink-warm:#ffd89a;
  --mml-soil-ink-cool:#9ed3ff;
  --mml-soil-halo:rgba(20,11,0,.72);
  --mml-soil-grain-l:rgba(255,246,226,.26);
  --mml-soil-grain-d:rgba(24,13,2,.15);
  --mml-soil-rule:rgba(20,10,0,.10);

  /* Marketing data-viz. *-warn / *-danger are the TEXT-safe members of each pair
     (5.02:1 / 6.47:1 on --mml-surface); *-fill is for areas and bars only. */
  --mml-viz-moist:#2563eb;
  --mml-viz-water:#0891b2;
  --mml-viz-ghost:#93a29a;
  --mml-viz-warn:#b45309;
  --mml-viz-warn-fill:#f59e0b;
  --mml-viz-danger:#b91c1c;
  --mml-viz-danger-fill:#ef4444;
  --mml-viz-surface:#ffffff;
}

/* ⚠️ TWO dark blocks below — [data-theme="dark"] (explicit choice / the head
   bootstrap) and the prefers-color-scheme fallback (JS disabled or blocked).
   They MUST carry the SAME declaration list; edit both together or the no-JS
   marketing/legal/404 pages drift (light .alert/.danger-zone tints under dark
   body text, light shadows on a near-black background). */
[data-theme="dark"] {
  --mml-text:#eef5f0; --mml-text-2:#9fb3a6; --mml-text-muted:#6b7d72;
  --mml-bg:#0e1813; --mml-surface:#16241c; --mml-surface-hover:#1d3026; --mml-border:#27392f;
  --mml-primary-50:#13301f; --mml-accent-50:#0f1f3a;
  --mml-success-bg:#0f2a1c; --mml-warning-bg:#2b220c; --mml-danger-bg:#2b1212; --mml-info-bg:#0f1f3a;
  --mml-success-fg:#86efac; --mml-warning-fg:#fcd34d; --mml-danger-fg:#fca5a5; --mml-info-fg:#93c5fd;
  --shadow-card:0 1px 3px rgba(0,0,0,.4);
  --shadow-hover:0 4px 6px rgba(0,0,0,.5);
  --shadow-xs:0 1px 2px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.35);
  --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
  --shadow-lg:0 4px 10px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5);
  --shadow-primary:0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(47,143,78,.25);
  --mml-surface-rgb:22,36,28;
  --mml-heading-accent:var(--mml-primary-light);
  --mml-link:var(--mml-primary-light);
  --mml-selection:rgba(76,175,106,.32);
  --mml-pattern-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M14 26c0-7 6-13 13-13 0 7-6 13-13 13Z' fill='%234caf6a' fill-opacity='.05'/%3E%3Cpath d='M50 62c0-7 6-13 13-13 0 7-6 13-13 13Z' fill='%234caf6a' fill-opacity='.05'/%3E%3C/svg%3E");

  /* ── EDITORIAL LAYER (dark) — keep in lockstep with the media block below ── */
  --mml-text-3:#8aa093;                 /* 6.50:1 on bg · 5.78:1 on surface */
  --mml-rule:#27392f; --mml-rule-strong:#3a5046; --mml-ink-dec:#546a5d;
  /* Dark ink on a bright green face reads better than white on a dark green one:
     #08150d on #4caf6a is 6.81:1, and the button stops disappearing into the page. */
  --mml-primary-btn:#4caf6a; --mml-primary-btn-hover:#3f9d5c; --mml-primary-btn-ink:#08150d;
  --mml-sky-1:#101c16; --mml-sky-2:#0c1511;
  --mml-soil-dry-a:#9a7a50; --mml-soil-dry-b:#886438; --mml-soil-dry-c:#736251;
  --mml-soil-wet-a:#170d01; --mml-soil-wet-b:#130a00; --mml-soil-wet-c:#120e08;
  --mml-thatch:#6e6236; --mml-root:#d8c6a0; --mml-root-shadow:#0d0700; --mml-pebble:#8b7c69;
  --mml-earth:#100e0a; --mml-earth-2:#1c1710;
  --mml-cream:#f2ebdf; --mml-cream-2:#cfc2ae; --mml-cream-3:#9db39f; --mml-cream-ink:#211a12;
  --mml-cream-rgb:242,235,223;
  --mml-grass-1:#123c22; --mml-grass-2:#17512b; --mml-grass-3:#1c5f33;
  --mml-grass-4:#25743f; --mml-grass-5:#3d9257; --mml-grass-6:#4fa869;
  --mml-device:#d6dcd5; --mml-device-2:#98a49a; --mml-device-edge:#5d6a61;
  --mml-metal-1:#aab3ac; --mml-metal-2:#6d766f;
  --mml-pv-1:#22334a; --mml-pv-2:#101a2c;
  --mml-soil-ink:#faf4e8; --mml-soil-ink-warm:#ffd89a; --mml-soil-ink-cool:#9ed3ff;
  --mml-soil-halo:rgba(0,0,0,.78);
  --mml-soil-grain-l:rgba(255,246,226,.18); --mml-soil-grain-d:rgba(0,0,0,.22);
  --mml-soil-rule:rgba(0,0,0,.16);
  --mml-viz-moist:#6ea8fe; --mml-viz-water:#22c1dd; --mml-viz-ghost:#6f8479;
  --mml-viz-warn:#fbbf24; --mml-viz-warn-fill:#f59e0b;
  --mml-viz-danger:#fca5a5; --mml-viz-danger-fill:#ef4444;
  --mml-viz-surface:#16241c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mml-text:#eef5f0; --mml-text-2:#9fb3a6; --mml-text-muted:#6b7d72;
    --mml-bg:#0e1813; --mml-surface:#16241c; --mml-surface-hover:#1d3026; --mml-border:#27392f;
    --mml-primary-50:#13301f; --mml-accent-50:#0f1f3a;
    --mml-success-bg:#0f2a1c; --mml-warning-bg:#2b220c; --mml-danger-bg:#2b1212; --mml-info-bg:#0f1f3a;
    --mml-success-fg:#86efac; --mml-warning-fg:#fcd34d; --mml-danger-fg:#fca5a5; --mml-info-fg:#93c5fd;
    --shadow-card:0 1px 3px rgba(0,0,0,.4);
    --shadow-hover:0 4px 6px rgba(0,0,0,.5);
    --shadow-xs:0 1px 2px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.35);
    --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
    --shadow-lg:0 4px 10px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.5);
    --shadow-primary:0 2px 6px rgba(0,0,0,.4), 0 10px 24px rgba(47,143,78,.25);
    --mml-surface-rgb:22,36,28;
    --mml-heading-accent:var(--mml-primary-light);
    --mml-link:var(--mml-primary-light);
    --mml-selection:rgba(76,175,106,.32);
    --mml-pattern-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M14 26c0-7 6-13 13-13 0 7-6 13-13 13Z' fill='%234caf6a' fill-opacity='.05'/%3E%3Cpath d='M50 62c0-7 6-13 13-13 0 7-6 13-13 13Z' fill='%234caf6a' fill-opacity='.05'/%3E%3C/svg%3E");

    /* ── EDITORIAL LAYER (dark) — MUST match the [data-theme="dark"] block above ── */
    --mml-text-3:#8aa093;
    --mml-rule:#27392f; --mml-rule-strong:#3a5046; --mml-ink-dec:#546a5d;
    --mml-primary-btn:#4caf6a; --mml-primary-btn-hover:#3f9d5c; --mml-primary-btn-ink:#08150d;
    --mml-sky-1:#101c16; --mml-sky-2:#0c1511;
    --mml-soil-dry-a:#9a7a50; --mml-soil-dry-b:#886438; --mml-soil-dry-c:#736251;
    --mml-soil-wet-a:#170d01; --mml-soil-wet-b:#130a00; --mml-soil-wet-c:#120e08;
    --mml-thatch:#6e6236; --mml-root:#d8c6a0; --mml-root-shadow:#0d0700; --mml-pebble:#8b7c69;
    --mml-earth:#100e0a; --mml-earth-2:#1c1710;
    --mml-cream:#f2ebdf; --mml-cream-2:#cfc2ae; --mml-cream-3:#9db39f; --mml-cream-ink:#211a12;
    --mml-cream-rgb:242,235,223;
    --mml-grass-1:#123c22; --mml-grass-2:#17512b; --mml-grass-3:#1c5f33;
    --mml-grass-4:#25743f; --mml-grass-5:#3d9257; --mml-grass-6:#4fa869;
    --mml-device:#d6dcd5; --mml-device-2:#98a49a; --mml-device-edge:#5d6a61;
    --mml-metal-1:#aab3ac; --mml-metal-2:#6d766f;
    --mml-pv-1:#22334a; --mml-pv-2:#101a2c;
    --mml-soil-ink:#faf4e8; --mml-soil-ink-warm:#ffd89a; --mml-soil-ink-cool:#9ed3ff;
    --mml-soil-halo:rgba(0,0,0,.78);
    --mml-soil-grain-l:rgba(255,246,226,.18); --mml-soil-grain-d:rgba(0,0,0,.22);
    --mml-soil-rule:rgba(0,0,0,.16);
    --mml-viz-moist:#6ea8fe; --mml-viz-water:#22c1dd; --mml-viz-ghost:#6f8479;
    --mml-viz-warn:#fbbf24; --mml-viz-warn-fill:#f59e0b;
    --mml-viz-danger:#fca5a5; --mml-viz-danger-fill:#ef4444;
    --mml-viz-surface:#16241c;
  }
}