/* ==========================================================================
   TIP design tokens — the one source of truth for colour, type, shape,
   spacing, elevation and motion across the whole product (public site and
   the signed-in consoles). docs/DESIGN_SYSTEM.md is the guide; ADR-0013 is
   the decision.

   Colour is DERIVED, not picked: the brand seed #0B4021 (HCT hue 155 ·
   chroma 32 · tone 23) runs through Material 3's HCT tonal algorithm and every
   role below is a tone of the seed's own hue (primary), a muted tone of it
   (secondary, neutrals) or the one deliberate accent (tertiary, hue 285, the
   "intelligence" accent for sensors and the AI advisor). Every text/fill pair
   is measured against WCAG 2.2 AA and pinned by scripts/design-tokens-check.py.

   Scope — by house law the tokens live on a scope class, never on :root:
     .tip-theme                        the light scheme (the default). index.html
                                       puts it on <body>, so every layout, and the
                                       dialogs and popovers MudBlazor renders at
                                       the body, resolve the tokens.
     .tip-theme[data-scheme="dark"]    the whole tree in the dark scheme (phase 4)
     .tip-theme [data-scheme="dark"]   a dark island inside a light page (the
                                       landing's hero, promise and footer bands)
     .tip-theme [data-scheme="light"]  a light island inside a dark tree
   Both schemes carry the SAME role names, so a component written once against
   the roles reads correctly on either; nobody picks a colour "for dark" by hand.
   The MudBlazor palette (App.razor) carries the same values in MudBlazor's slots.
   ========================================================================== */

.tip-theme,
.tip-theme [data-scheme="light"] {
    color-scheme: light;

    /* ---- primary · the brand green, hue 155 ---------------------------------
       The seed is tone 23: dark enough to be BOTH the fill and the text colour
       (11.9:1 under white, 11.3:1 on the surface), so one primary serves
       buttons, links, active navigation, focus rings and the product mark. */
    --m3-primary:                    #0b4021;   /* the seed — fills, text, outlines, active states */
    --m3-on-primary:                 #ffffff;
    --m3-primary-container:          #b9f0c3;   /* tone 90 — selected chips, tonal buttons, the Advisor strip's ground */
    --m3-on-primary-container:       #00210d;   /* tone 10 */
    --m3-primary-fixed:              #b9f0c3;   /* same in both schemes: the CTA on a dark band */
    --m3-primary-fixed-dim:          #9ed3a8;   /* tone 80 — accents and links ON the brand green (7.0:1) */
    --m3-on-primary-fixed:           #00210d;
    --m3-on-primary-fixed-variant:   #1e502f;   /* tone 30 — text on primary-fixed-dim */
    --m3-inverse-primary:            #9ed3a8;
    --m3-primary-hover:              #1e502f;   /* Fern, tone 30 — hover of a filled button LIGHTENS a dark fill */
    --m3-primary-pressed:            #003417;   /* tone 18 — pressed state of a filled button */

    /* ---- secondary · the same hue, muted (chroma 16) --------------------------
       Filters, segmented groups, neutral chips — things that must look clickable
       without competing with the primary action. */
    --m3-secondary:                  #506353;
    --m3-on-secondary:               #ffffff;
    --m3-secondary-container:        #d2e8d3;
    --m3-on-secondary-container:     #0d1f12;

    /* ---- tertiary · the intelligence accent, hue 285 --------------------------
       The ONE colour outside the green family: sensor pins, AI/advisor content,
       provenance marks ("why this number"). Chosen, not derived: a violet reads
       as "the machine said" against the agronomic green, and it is the colour
       the console already used for sensor pins (#594ae2). */
    --m3-tertiary:                   #585992;
    --m3-on-tertiary:                #ffffff;
    --m3-tertiary-container:         #e1dfff;
    --m3-on-tertiary-container:      #13144a;

    /* ---- error (M3 baseline, unchanged from the console) ---------------------- */
    --m3-error:                      #b3261e;
    --m3-on-error:                   #ffffff;
    --m3-error-container:            #f9dedc;
    --m3-on-error-container:         #410e0b;

    /* ---- surfaces · neutral with the seed's hue (chroma 6) ---------------------
       Tonal layers instead of borders: page panel → zone → card. The console
       chrome (top bar + rail, one L-shaped surface) is surface-container-high,
       one step below the page panel (1.16:1) so the frame reads without lines. */
    --m3-surface:                    #f6fbf3;   /* the page panel */
    --m3-surface-dim:                #d7dbd4;
    --m3-surface-bright:             #f6fbf3;
    --m3-surface-container-lowest:   #ffffff;   /* cards, dialogs, inputs */
    --m3-surface-container-low:      #f0f5ed;   /* the widget zone, alt marketing bands */
    --m3-surface-container:          #ebefe7;   /* tonal tiles inside a card */
    --m3-surface-container-high:     #e5eae2;   /* the console chrome; row dividers */
    --m3-surface-container-highest:  #dfe4dc;   /* the strongest tonal panel (never text) */
    /* A card and the tonal tile inside it, as ONE role across the schemes: by day a card is
       white and a tile one step down; by night depth comes from light, so a card is one step
       LIGHTER than the page and a tile one step lighter again (DESIGN_SYSTEM.md §4). */
    --m3-surface-card:               #ffffff;   /* = surface-container-lowest by day */
    --m3-surface-card-tonal:         #f0f5ed;   /* = surface-container-low by day */
    --m3-on-surface:                 #181d18;   /* body text, 16.3:1 */
    --m3-on-surface-variant:         #414941;   /* labels, captions, meta, 8.9:1 */
    --m3-outline:                    #717971;   /* icon-only controls, input borders, 4.3:1 */
    --m3-outline-variant:            #c1c9bf;   /* card hairlines, decorative dividers */
    --m3-inverse-surface:            #2d322d;   /* snackbars, tooltips */
    --m3-inverse-on-surface:         #eef2ea;
    --m3-scrim:                      #000000;
    --m3-shadow:                     #000000;

    /* ---- the dark bands' ground (public site only) -----------------------------
       The hero, the promise and the final call stand on the brand green itself,
       deepening to tone 12; the footer sits on tone 10. These are the dark
       scheme's primary-container and surface, used as a light page's islands. */
    --tip-band-top:                  #0b4021;
    --tip-band-deep:                 #00260f;
    --tip-band-floor:                #00210d;

    /* ---- status · one meaning, one fill/text pair (DESIGN_SYSTEM.md §5) ---------
       Deliberately outside the brand family. The olive that WAS the brand is now
       the "good" status only — a mid-tone, warmer green that no longer competes
       with the deep primary. Fills may be light (dots, bars, tile accents); text
       tones are AA on the surface and on white. */
    --tip-ok-fill:    #8fb14c;  --tip-ok-text:    #4f6d1c;   /* good · stable · done · within range */
    --tip-warn-fill:  #e39a2f;  --tip-warn-text:  #8a5a00;   /* watch · due · planned · below range */
    --tip-bad-fill:   #cc5d5d;  --tip-bad-text:   #a63d3d;   /* action · overdue · critical */
    --tip-info-fill:  #309af9;  --tip-info-text:  #0066ae;   /* in progress · info (text tone is new: #2e93fa was 3.2:1) */
    --tip-mild-fill:  #b7b14c;  --tip-mild-text:  #6f6a1a;   /* approaching lower range · mild */
    --tip-minor-fill: #e3b02f;  --tip-minor-text: #785a00;   /* the "minor" severity step (12–14 % O₂, scores 40–59) */
    --tip-medium-fill:#e07b39;  --tip-medium-text:#9a4601;   /* the "medium" step, one short of action (10–12 % O₂, 20–39) */
    --tip-above-fill: #4a9fc4;  --tip-above-text: #2f6f8a;   /* above range · recovering */
    --tip-mute-fill:  #8d928b;  --tip-mute-text:  #5b605a;   /* neutral · no record · cancelled */
    --tip-nodata:     #b6bfc3;                                /* no data (dots only, never text) */

    /* ---- categorical series · chart lines and the track-colour choices (DESIGN_SYSTEM.md §5)
       Iris · Sky · Leaf · Bark · Amber · Orchid · Lagoon · Rose — distinct hues, none of them a
       status colour's exact value except Amber, which is also "watch" (a series is named, a
       status is labeled, so they never meet without a legend). Mirrored in DesignTokens.Series. */
    --tip-series-1: #585992; --tip-series-2: #309af9; --tip-series-3: #699c75; --tip-series-4: #8d6e63;
    --tip-series-5: #e39a2f; --tip-series-6: #ab47bc; --tip-series-7: #26c6da; --tip-series-8: #ec407a;

    /* ---- elevation (M3 levels 1–3, calibrated on the surface tones) ------------- */
    --m3-elev-1: 0 1px 2px rgba(24, 29, 24, .05), 0 1px 3px rgba(24, 29, 24, .05);
    --m3-elev-2: 0 2px 6px rgba(24, 29, 24, .07), 0 8px 24px rgba(24, 29, 24, .07);
    --m3-elev-3: 0 12px 32px rgba(0, 33, 13, .14), 0 2px 8px rgba(0, 33, 13, .08);

    /* ---- state layers (M3 opacities, applied over the role with color-mix) ------ */
    --m3-state-hover:   8%;
    --m3-state-focus:  10%;
    --m3-state-pressed: 10%;
    --m3-state-dragged: 16%;
}

.tip-theme[data-scheme="dark"],
.tip-theme [data-scheme="dark"] {
    color-scheme: dark;

    --m3-primary:                    #9ed3a8;   /* tone 80 — 10.9:1 on the dark surface */
    --m3-on-primary:                 #01391b;
    --m3-primary-container:          #0b4021;   /* the seed itself: the brand stays visible by night */
    --m3-on-primary-container:       #b9f0c3;
    --m3-primary-fixed:              #b9f0c3;
    --m3-primary-fixed-dim:          #9ed3a8;
    --m3-on-primary-fixed:           #00210d;
    --m3-on-primary-fixed-variant:   #1e502f;
    --m3-inverse-primary:            #376845;
    --m3-primary-hover:              #b9f0c3;   /* Dew — a light fill brightens on hover */
    --m3-primary-pressed:            #83b78e;   /* a step toward the surface */

    --m3-secondary:                  #b6ccb8;
    --m3-on-secondary:               #223526;
    --m3-secondary-container:        #384b3c;
    --m3-on-secondary-container:     #d2e8d3;

    --m3-tertiary:                   #c1c1ff;
    --m3-on-tertiary:                #292a60;
    --m3-tertiary-container:         #404178;
    --m3-on-tertiary-container:      #e1dfff;

    --m3-error:                      #f2b8b5;
    --m3-on-error:                   #601410;
    --m3-error-container:            #8c1d18;
    --m3-on-error-container:         #f9dedc;

    --m3-surface:                    #101510;   /* tinted dark, not pure black */
    --m3-surface-dim:                #101510;
    --m3-surface-bright:             #353a35;
    --m3-surface-container-lowest:   #0a0f0b;
    --m3-surface-container-low:      #181d18;
    --m3-surface-container:          #1c211c;
    --m3-surface-container-high:     #262b26;
    --m3-surface-container-highest:  #313631;
    --m3-surface-card:               #181d18;   /* = surface-container-low by night: one step above the page */
    --m3-surface-card-tonal:         #262b26;   /* = surface-container-high by night: one step above the card */
    --m3-on-surface:                 #dfe4dc;
    --m3-on-surface-variant:         #c1c9bf;
    --m3-outline:                    #8b938a;
    --m3-outline-variant:            #414941;
    --m3-inverse-surface:            #dfe4dc;
    --m3-inverse-on-surface:         #2d322d;

    --tip-band-top:                  #0b4021;
    --tip-band-deep:                 #00260f;
    --tip-band-floor:                #00210d;

    /* status text tones lifted to tone 80 (≥ 10:1 on the dark surfaces); fills stay */
    --tip-ok-text:    #afd275;
    --tip-warn-text:  #fabb61;
    --tip-bad-text:   #ffb3af;
    --tip-info-text:  #a0caff;
    --tip-mild-text:  #d0ca70;
    --tip-minor-text: #f4bf3e;
    --tip-medium-text:#ffb68c;
    --tip-above-text: #92cfed;
    --tip-mute-text:  #c4c7c1;

    --m3-elev-1: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .25);
    --m3-elev-2: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
    --m3-elev-3: 0 12px 32px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   Type, shape, spacing, sizes, motion — scheme-independent, same scope.
   Values follow docs/SHAPE_MAP.md §A1 (the M3 names: sm = 8, md = 12, lg = 16);
   the dashboard's older radius names (sm/md/lg = 12/16/24) are renamed in the
   phase-2 sweep.
   ========================================================================== */
.tip-theme {
    /* ---- type · ONE family. Geist (drawn for dashboards) for everything: display
       sizes at weight 600 with tight tracking are the "strict premium" look —
       simplicity, no display flourish (Ivan's ruling, 24.10). Geist Mono for
       provenance (ids, stamps, codes). Geist's tabular figures are ON wherever
       digits form columns (font-variant-numeric: tabular-nums), never only
       "where it looks wrong". */
    --m3-font:         "Geist", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --m3-font-brand:   "Geist", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;   /* same face: display = weight + tracking, not a second family */
    --m3-font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --m3-display-settings: normal;         /* no variable axes in play; kept so display rules have one knob */
    --m3-tracking-display: -.025em;        /* display + headline sizes */
    --m3-tracking-title:   -.01em;         /* titles 16–22 px */

    /* M3 type scale, weight size/line-height — display + headline at 600 */
    --m3-type-display-l:  600 56px/60px;
    --m3-type-display-m:  600 44px/50px;
    --m3-type-display-s:  600 36px/42px;
    --m3-type-headline-l: 600 32px/38px;
    --m3-type-headline-m: 600 28px/34px;   /* the greeting, section titles */
    --m3-type-headline-s: 600 24px/30px;   /* dialog titles */
    --m3-type-title-l:    500 22px/28px;
    --m3-type-title-m:    500 16px/24px;   /* widget titles */
    --m3-type-title-s:    500 14px/20px;   /* row titles, block headers */
    --m3-type-body-l:     400 16px/24px;   /* marketing paragraphs */
    --m3-type-body-m:     400 14px/20px;   /* widget body */
    --m3-type-body-s:     400 12px/16px;   /* meta, captions */
    --m3-type-label-l:    500 14px/20px;   /* button labels */
    --m3-type-label-m:    500 12px/16px;   /* chips, kickers, tile labels */
    --m3-type-label-s:    500 11px/16px;   /* the floor — units, footnotes, axis labels */
    --m3-tracking-label:  .06em;           /* uppercase labels get a little air */

    /* ---- shape (M3 shape scale + Expressive large steps) ---- */
    --m3-radius-xs:    4px;    /* text fields, menus, snackbars, plain tooltips */
    --m3-radius-sm:    8px;    /* chips, rich tooltips, cell inputs */
    --m3-radius-md:   12px;    /* cards' inner rows, tiles, map canvas */
    --m3-radius-lg:   16px;    /* tonal blocks, drawers, docked sheets */
    --m3-radius-xl:   20px;    /* the widget card, the page panel corner */
    --m3-radius-2xl:  28px;    /* dialogs, floating sheets, the widget zone */
    --m3-radius-full: 999px;   /* buttons, segmented groups, icon buttons, badges */

    /* ---- spacing (4 dp grid; prefer 8 / 12 / 16 / 24) ---- */
    --m3-space-1: 4px;  --m3-space-2: 8px;  --m3-space-3: 12px;
    --m3-space-4: 16px; --m3-space-6: 24px; --m3-space-8: 32px; --m3-space-12: 48px;
    --m3-hairline: 2px;

    /* ---- sizes (component heights = M3 default and density steps) ---- */
    --m3-target:      48px;    /* touch target; the drawn control may be smaller */
    --m3-ctrl:        40px;    /* button S / icon button / segmented at density 0 */
    --m3-ctrl-d1:     36px;    /* density −1: the console's default on mouse surfaces */
    --m3-ctrl-xs:     32px;    /* button XS / chip / badge-large */
    --m3-chip-d1:     28px;
    --m3-pointer-min: 24px;    /* WCAG 2.5.8 floor for mouse-only controls */

    /* ---- motion (M3 duration & easing; Expressive springs are approximated
       with the emphasized curves — real springs stay in JS where they matter) ---- */
    --m3-dur-short2: 100ms; --m3-dur-short3: 150ms; --m3-dur-short4: 200ms;
    --m3-dur-medium2: 300ms; --m3-dur-long2: 500ms;
    --m3-ease-standard:    cubic-bezier(.2, 0, 0, 1);
    --m3-ease-decelerate:  cubic-bezier(0, 0, 0, 1);
    --m3-ease-accelerate:  cubic-bezier(.3, 0, 1, 1);
    --m3-ease-emphasized:  cubic-bezier(.2, 0, 0, 1);
    --m3-ease-spring:      cubic-bezier(.34, 1.3, .64, 1);   /* the one overshoot, for reveals only */
}

/* Reduced motion is a token too: every transition reads --m3-motion-scale. */
.tip-theme { --m3-motion-scale: 1; }
@media (prefers-reduced-motion: reduce) {
    .tip-theme { --m3-motion-scale: 0; }
}