/* =========================================================
   IrisBG Colour System — "One Forest, Two Grounds"

   Light is the irisbg.com palette ("Paper, Leaf and One Ochre") plus the
   app-only roles the site never needed: a 7:1 muted, a danger family, field
   states and pills. Dark is "Archive Night": the site's brand forest
   #17362A kept literally as the accordion header, on a page one step
   darker, with the card at their geometric mean.
   Spec: https://claude.ai/code/artifact/1ea967fe-d6bf-4821-a35d-bf8db65b0092

   LAYERS (from the site's style guide):
     1. Primitives — the hue-numbered ramps below. Declared once, never
        theme-branched, never consumed by components.
     2. Palette + semantic — the theme-branched tokens in this file, 100%
        var() into layer 1 (rule 7: a new hex first joins a ramp as an
        off-step), then theme.css maps them onto the --color-* roles.
     3. Component-scoped tokens in *.razor.css, consuming --color-* only.

   THE ONE RULE TO KEEP (from the source system):
     The primary owns every FILL. Leaf owns every MARK.
   #17362A is 1.18:1 against ink, so a label or a tick drawn in the primary
   on a light ground reads as body text, not as an accent. Marks — tab bars,
   focus rings, ticks, selected edges — are leaf in light and sage in dark.

   Light lives on bare :root so a document that never gets a data-theme
   attribute still renders a complete palette. index.html stamps
   data-theme before first paint; the prefers-color-scheme block below
   covers the window before that runs and any host that never stamps.
   ========================================================= */

/* ── Layer 1: primitives ──
   The site's ramps, plus the app's off-steps (marked •). Do not consume
   these from components — they exist so every themed value below has a
   named home on a ramp instead of being a loose hex in a theme block. */
:root {
    /* brand greens */
    --brand-50:  #EFF4EE;
    --brand-100: #E4EBE2;   /* moss */
    --brand-125: #E1EFE5;   /* • ok well, light */
    --brand-200: #CBD9CD;
    --brand-300: #A8BCA9;
    --brand-400: #7FB58E;   /* • sage — existed only by reference in the
                               site's notes; pinned here */
    --brand-500: #3E8F5F;
    --brand-600: #2E7D52;   /* leaf */
    --brand-700: #1D5C3B;
    --brand-800: #17492F;
    --brand-850: #1C2722;   /* • dark card — geometric mean of page and header */
    --brand-900: #14281D;
    --brand-950: #0C1A12;   /* • night page */
    --forest:       #17362A;
    --forest-light: #244C3C;

    /* sage-grey neutrals */
    --neutral-50:  #F7F7F2;  /* paper */
    --neutral-100: #EFEFE8;
    --neutral-200: #D5DCD4;
    --neutral-250: #C2CBC2;  /* • disabled border, light */
    --neutral-300: #BEC7BD;
    --neutral-400: #93A196;
    --neutral-450: #8A968D;  /* • disabled ink, dark */
    --neutral-500: #6F7F73;
    --neutral-600: #5A6B5E;
    --neutral-650: #4C5850;  /* • disabled border, dark */
    --neutral-700: #47564B;
    --neutral-750: #2E3D37;  /* • dark popover */
    --neutral-800: #2D3934;  /* • dark hairline */
    --neutral-850: #232B27;  /* • dark recessed tint */

    /* ochre — the identifier family */
    --ochre-50:     #F4ECDA; /* • warn well, light */
    --ochre-400:    #CFA453; /* • brass — the dark identifier; 7.75:1 on the
                                night page. Same 39–41° hue as ochre-700, so
                                the two themes' identifiers are one voice. */
    --ochre-500:    #C89B3C;
    --ochre-700:    #8F6B1E;
    --ochre-bright: #D9AE55;
    --ochre-900:    #3A3117; /* • warn well, dark */

    /* rust — the danger family; entirely the app's, the site has none (•) */
    --rust-50:  #F7E5DE;
    --rust-200: #F0AE9B;
    --rust-300: #D98A75;
    --rust-600: #A4432C;
    --rust-900: #3A1F17;

    --white: #FFFFFF;
}

/* ── Light ── */
:root {

    /* Native chrome (select popups, scrollbars, date pickers) follows the
       theme instead of defaulting to the OS look. */
    color-scheme: light;

    /* ── Ground & ink ──
       Warm paper for the page, white for anything raised off it. */
    --ground:        var(--neutral-50);   /* page behind every surface */
    --surface:       var(--white);        /* cards, bars, sheets */
    --surface-2:     var(--neutral-100);  /* hover / recessed tint */
    --overlay:       var(--white);        /* popovers — hairline + shadow
                                             carry them; white on paper is
                                             only 1.07:1 */
    --ink:           var(--brand-900);    /* body text — 14.46:1 on paper */
    --ink-2:         var(--neutral-700);  /* secondary text */
    --muted:         var(--neutral-700);  /* labels, hints — 7.24:1, the
                                             outdoor-phone floor */
    --ink-disabled:  var(--neutral-600);  /* 5.68:1 — dimmed yet legible */
    --rule:          var(--neutral-200);  /* hairline borders */
    --rule-strong:   var(--neutral-300);  /* emphasised borders, dividers */
    --rule-brand:    var(--neutral-200);  /* tab strip; dark lifts it */

    /* ── Brand: forest (primary) ──
       #17362A is the brand primary, and it came FROM this app: it is the
       fill on every solid button here, so a button on the website and a
       button in Lite are one colour. On a light ground it is a fill and a
       heading colour, never text — --viridian-accent is the brand green
       lifted until it reads as a colour beside ink (7.38:1 on paper), and
       links, the active nav item and text-primary all use that. */
    --viridian:        var(--forest);
    --viridian-accent: var(--brand-700);    /* the brand as text */
    --viridian-ink:    var(--white);        /* text ON a forest fill (13.15:1) */
    --viridian-soft:   var(--brand-100);    /* moss — the accordion header */
    /* The brand as a LINE: focus rings, control borders, selected edges,
       the tab bar. Leaf, not forest: forest is 1.18:1 against ink and a
       forest mark on a light ground reads as body text. */
    --viridian-edge:   var(--brand-600);

    /* ── Leaf (marks: eyebrows, ticks, icons, focus, "ok") ── */
    --leaf:        var(--brand-600);
    --leaf-bright: var(--brand-600);  /* focus ring — the site's
                                         --color-focus, same value on purpose */
    --leaf-soft:   var(--brand-125);  /* "ok" well */
    /* Leaf is 3.09:1 on the shell and would be unreadable there. Any green
       shown ON --shell-bg uses this instead. Declared once: the shell is
       dark in BOTH themes, so dark inherits it. */
    --leaf-on-dark: var(--brand-400);

    /* ── Ochre (identifiers / caution) — the one accent that pulls against
         the green. Raw ochre #C89B3C is 2.4:1 on paper and is decorative
         only, so the token the app consumes is the text-safe twin. In dark
         this same role is the raw ochre itself, 7.00:1 on the night page.
         Set in the mono face, the ochre accession number is the one voice
         identical on the website, the light app and the dark app. ── */
    --brass:      var(--ochre-700);   /* 4.56:1 on paper */
    --brass-ink:  var(--white);       /* text ON a solid ochre fill */
    --brass-soft: var(--ochre-50);    /* warn well */

    /* ── Rust (danger). Border and text share one value in light. ── */
    --rust:      var(--rust-600);     /* invalid border + ring — 6.14:1 */
    --rust-text: var(--rust-600);     /* inline error text */
    --rust-on:   var(--white);        /* text ON a solid rust fill */
    --rust-ink:  var(--ink);          /* ink on the well — full contrast;
                                         follows --ink in both themes */
    --rust-soft: var(--rust-50);      /* danger well */

    --link: var(--brand-700);         /* 7.38:1 on paper */

    /* Active nav item + the brand's "Lite". Brand-as-text in light; dark
       swaps to brass so the highlight is not one more sage mark. */
    --nav-active: var(--brand-700);

    /* ── Form fields ──
         Wells step toward the extreme: the lightest surface in light, the
         darkest in dark, so a field reads as "a place to write" in both.
         The border carries the 3:1 that WCAG 1.4.11 asks of a control
         boundary. Neutral on purpose: focus then reads as a change of hue,
         not only of weight. Disabled dims the border below 3:1 on purpose
         and keeps the text legible. */
    --field-bg:              var(--white);
    --field-border:          var(--neutral-500);  /* 4.23:1 on white */
    --field-ink:             var(--brand-900);
    --field-border-disabled: var(--neutral-250);  /* 1.66:1 — deliberate */

    /* ── Map ──
         A cartographic ramp, not part of the brand system: the source
         palette says nothing about it, so these are unchanged. */
    --map-lawn:       #E3EAD8;
    --map-meadow:     #DCE5CE;
    --map-path:       #EFEBDD;
    --map-path-edge:  #D8D2BC;
    --map-water:      #C7D9DB;
    --map-water-edge: #A9C3C7;
    --map-canopy1:    #AFC79C;
    --map-canopy2:    #93B287;
    --map-canopy-rim: #7C9B70;
    --map-bed:        #D9CBAE;
    --map-grid:       rgba(94, 112, 98, .14);

    /* ── Depth ── */
    --shadow:      0 10px 30px rgba(20, 40, 29, .10);
    --shadow-soft: 0 2px 10px rgba(20, 40, 29, .07);
    --shadow-deep: 0 18px 48px rgba(20, 40, 29, .18);

    /* ── Veils — green-black in both themes ── */
    --scrim: rgba(20, 40, 29, .35);

    /* ── Shell (inverse surface: toasts, and anything that needs to read as
       chrome against the page). This is the site's own dark band, lifted
       whole. The app's nav bar is NOT this — it is a --surface bar. */
    --shell-bg:     var(--brand-900);
    --shell-ink:    var(--neutral-50);
    --shell-muted:  var(--brand-300);   /* the band's body copy */
    --shell-rule:   var(--brand-800);
    --shell-active: var(--white);
}

/* ── Dark: "Archive Night" ──
   Three anchors, none negotiable: the page is --brand-950, the accordion
   header stays literally #17362A (the brand forest), and paper #F7F7F2
   becomes the ink. The card sits at the geometric mean of page and header
   so the ladder climbs in even ≈×1.16 steps and the two greens order into
   figure and ground instead of clashing. The primary button inverts
   exactly: forest/white by day, paper/forest by night. Dark separates
   floating chrome by lightness, not shadow — shadows don't read on
   near-black. */

/* System-dark before (or without) a stamped data-theme. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --ground:       var(--brand-950);
        --surface:      var(--brand-850);
        --surface-2:    var(--neutral-850);
        --overlay:      var(--neutral-750);  /* a 1.35 step over the card */
        --ink:          var(--neutral-50);   /* paper — 16.67:1 on the page */
        --ink-2:        var(--brand-300);
        --muted:        var(--brand-300);    /* 8.90:1 — above the 7:1 floor */
        --ink-disabled: var(--neutral-450);  /* 5.83:1 */
        --rule:         var(--neutral-800);
        --rule-strong:  var(--neutral-500);
        --rule-brand:   var(--brand-800);    /* the tab strip's structural rule */

        /* The exact inversion: paper fill, forest label. */
        --viridian:        var(--neutral-50);
        --viridian-accent: var(--brand-400); /* sage — the brand as text, 7.60:1 */
        --viridian-ink:    var(--forest);    /* 12.23:1 on the paper fill */
        --viridian-soft:   var(--forest);    /* the header IS the brand anchor */
        --viridian-edge:   var(--brand-400); /* every brand line is sage */

        --leaf:        var(--brand-400);
        --leaf-bright: var(--brand-400);
        --leaf-soft:   var(--brand-800);     /* "ok" well */

        --brass:      var(--ochre-400);      /* 7.75:1 on the page */
        --brass-ink:  var(--brand-950);
        --brass-soft: var(--ochre-900);

        --rust:      var(--rust-300);        /* border — 5.76:1 on the card */
        --rust-text: var(--rust-200);        /* text — 8.24:1 on the card */
        --rust-on:   var(--brand-950);
        --rust-soft: var(--rust-900);

        --link: var(--brand-400);

        --nav-active: var(--ochre-400);      /* 6.67:1 on the nav bar */

        --field-bg:              var(--brand-950);   /* the well is the page */
        --field-border:          var(--neutral-400); /* 6.64:1 on the page */
        --field-ink:             var(--neutral-50);
        --field-border-disabled: var(--neutral-650); /* 2.41:1 — deliberate */

        --map-lawn:       #15221A;
        --map-meadow:     #182A1E;
        --map-path:       #2E332A;
        --map-path-edge:  #3E4438;
        --map-water:      #1C3138;
        --map-water-edge: #2C4A52;
        --map-canopy1:    #2C4A34;
        --map-canopy2:    #38603F;
        --map-canopy-rim: #4E7D55;
        --map-bed:        #3A3222;
        --map-grid:       rgba(180, 200, 185, .10);

        --shadow:      0 12px 34px rgba(0, 0, 0, .5);
        --shadow-soft: 0 2px 12px rgba(0, 0, 0, .4);
        --shadow-deep: 0 20px 52px rgba(0, 0, 0, .62);

        --scrim: rgba(4, 10, 6, .62);

        /* Nothing here is darker than the page, so chrome reads as RAISED
           rather than as inverted. */
        --shell-bg:     var(--neutral-750);
        --shell-ink:    var(--neutral-50);
        --shell-muted:  var(--brand-300);
        --shell-rule:   var(--neutral-800);
        --shell-active: var(--white);
    }
}

/* Explicit dark: wins over the media query in both directions.
   Same values as the block above — keep them in lockstep. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --ground:       var(--brand-950);
    --surface:      var(--brand-850);
    --surface-2:    var(--neutral-850);
    --overlay:      var(--neutral-750);
    --ink:          var(--neutral-50);
    --ink-2:        var(--brand-300);
    --muted:        var(--brand-300);
    --ink-disabled: var(--neutral-450);
    --rule:         var(--neutral-800);
    --rule-strong:  var(--neutral-500);
    --rule-brand:   var(--brand-800);

    --viridian:        var(--neutral-50);
    --viridian-accent: var(--brand-400);
    --viridian-ink:    var(--forest);
    --viridian-soft:   var(--forest);
    --viridian-edge:   var(--brand-400);

    --leaf:        var(--brand-400);
    --leaf-bright: var(--brand-400);
    --leaf-soft:   var(--brand-800);

    --brass:      var(--ochre-400);
    --brass-ink:  var(--brand-950);
    --brass-soft: var(--ochre-900);

    --rust:      var(--rust-300);
    --rust-text: var(--rust-200);
    --rust-on:   var(--brand-950);
    --rust-soft: var(--rust-900);

    --link: var(--brand-400);

    --nav-active: var(--ochre-400);

    --field-bg:              var(--brand-950);
    --field-border:          var(--neutral-400);
    --field-ink:             var(--neutral-50);
    --field-border-disabled: var(--neutral-650);

    --map-lawn:       #15221A;
    --map-meadow:     #182A1E;
    --map-path:       #2E332A;
    --map-path-edge:  #3E4438;
    --map-water:      #1C3138;
    --map-water-edge: #2C4A52;
    --map-canopy1:    #2C4A34;
    --map-canopy2:    #38603F;
    --map-canopy-rim: #4E7D55;
    --map-bed:        #3A3222;
    --map-grid:       rgba(180, 200, 185, .10);

    --shadow:      0 12px 34px rgba(0, 0, 0, .5);
    --shadow-soft: 0 2px 12px rgba(0, 0, 0, .4);
    --shadow-deep: 0 20px 52px rgba(0, 0, 0, .62);

    --scrim: rgba(4, 10, 6, .62);

    --shell-bg:     var(--neutral-750);
    --shell-ink:    var(--neutral-50);
    --shell-muted:  var(--brand-300);
    --shell-rule:   var(--neutral-800);
    --shell-active: var(--white);
}