/* ============================================================================
   FISHBOOK — tokens.css
   Every visual value lives here (Foundation Prompt v0.2 §4). Components never
   hard-code a colour, size or weight; they read a token.
   Direction: new, light, legible outdoors in any weather — high contrast,
   no thin type, no low-contrast helper text. Text contrast floor: 7:1 on the
   page ground; white-on-fill floor: 4.5:1. Ratios are measured in the mockup.

   Two themes, one hierarchy. Light is the default and the outdoor theme.
   Dark (recorded exception to v0.2 §4, Zeka, 8 Sep 2026) is for the evening
   post in a dim room. Dark is NOT an inversion: same roles, colours re-chosen
   and re-measured. Theme resolution:
     - no data-theme on <html>  → follow the phone (prefers-color-scheme)
     - <html data-theme="light"> / "dark" → the user's explicit choice
   The app sets data-theme from the user's setting (Auto / Light / Dark),
   remembered on the device and, once logged in, on the account.
   ============================================================================ */

:root {
  color-scheme: light;

  /* ---- Colour: grounds ---------------------------------------------------- */
  --c-bg:            #FFFFFF;   /* page ground: pure white reads best in sun glare */
  --c-ground:        #F2F5F3;   /* quiet panels, tab bar, input fills (green-biased neutral) */
  --c-surface:       #FFFFFF;   /* cards */
  --c-field:         #FFFFFF;   /* input wells (in dark, darker than the card: a well, not a card) */
  --c-border:        #C7D1CC;   /* hairlines */
  --c-border-strong: #8FA097;   /* input borders */

  /* ---- Colour: text (all ≥ 7:1 on --c-bg) ---------------------------------- */
  --c-text:          #14201A;   /* 16.8:1 */
  --c-text-2:        #3D4C45;   /* 9.1:1 — helper text floor; nothing lighter is allowed for words */
  --c-text-on-fill:  #FFFFFF;   /* text on lake-fill, float-fill, danger-fill */

  /* ---- Colour: brand -------------------------------------------------------- */
  /* "lake" is the text/link/active colour; "lake-fill" is the button background.
     Identical in light; they part company in dark, where a fill must stay deep
     while a link must become light enough to read. Same for float and danger. */
  --c-lake:          #0E3E5E;   /* links, active tab, wordmark. 11.2:1 */
  --c-lake-fill:     #0E3E5E;   /* primary buttons; white text 11.2:1 */
  --c-lake-soft:     #E3EDF4;   /* selected states */
  /* the talk — 0.44.0 (Zeka, 29 Oct: "the standard chat look"): two tones; the others' lines on the ground, on the left; your
     own lines on the right in this tone. */
  --c-talk-mine:     #DCE8F2;
  --c-float:         #8F2A05;   /* the bobber, as text: the "Add" label, "to buy". 8.4:1 (0.43.0: was the fill's #B93A0A, 5.7:1 — under the floor) */
  --c-float-fill:    #B93A0A;   /* the bobber, as fill: ONLY Add Catch and the one primary action. White text 5.7:1 */
  --c-float-soft:    #FBE9E0;

  /* ---- Colour: semantic (never used as decoration) -------------------------- */
  --c-ok:            #145536;   /* 8.8:1, 7.5:1 on ok-soft — a fishing day, success (0.43.0: was #1B6B45, 6.5:1) */
  --c-ok-soft:       #E1F0E8;
  --c-warn-bg:       #FFE8B3;
  --c-warn-text:     #5A3E00;   /* 8.2:1 on --c-warn-bg */
  --c-danger:        #B42318;   /* danger as text. 6.6:1 */
  --c-danger-fill:   #B42318;   /* filled danger ONLY inside a confirmation step; the first "Delete" is outlined (danger text + border) */
  --c-danger-soft:   #FBE4E2;
  --c-tick:         #0E3E5E;   /* 0.55.3 (Zeka, 2 Nov: the green "like an alien" once the blue was seen): a ticked box in the site's own blue, as Done and the links; the white tick 11.2:1 */
  --c-tick-ink:     #FFFFFF;
  --c-tag-bg:        #E6ECE9;   /* neutral chips: "Location hidden", age tag. Text 14:1 */
  --c-gold:          #A67C00;   /* 0.3.1: the ring around your initial in the top bar (a mark, never text). 3.6:1 on white */
  --c-gold-text:     #624A00;   /* 0.43.0: the gold as words (the intro's chapter labels, the phone label, a record's initial) — 8.4:1 */
  --c-ring-draft:    #8A5A00;   /* 0.9.1: the ring when a draft waits — amber by day (the likes ring is --c-lake) */
  --c-live:          #178A4A;   /* 0.11.0: the dot on the ring while your trip runs — a shade brighter than --c-ok (a mark, never text) */
  --c-likes:         #0E3E5E;   /* 0.11.2: the like's blue — the ring, the menu dot, the thin tag. By day the lake blue; at night the one blue on a grey page */
  --c-rain:          var(--c-likes);   /* 0.54.0: a chance of rain from 30% in the weather's hours — the water's blue (Zeka chose it on the bench, 2 Nov) */
  /* Section 3: marks ON a photo (the temperature, the like and the superlike) — the same in both themes, because
     the ground is the photo: a dark scrim so white always reads, and two light accents for "yours". */
  --c-scrim:         rgba(8, 18, 28, 0.55);
  --c-on-photo:      #FFFFFF;
  --c-photo-like:    #9ED2FF;   /* the like you gave (lake, lightened for the scrim) */
  --c-photo-super:   #FFB870;   /* the superlike you gave (float, lightened for the scrim) */
  --c-shade:         rgba(0, 0, 0, 0.75);   /* the shadow under marks on a photo */
  --c-shade-soft:    rgba(0, 0, 0, 0.45);
  /* 0.43.0 (build 4): the colours that were written into app.css */
  --c-brand-dot:     #B93A0A;   /* the wordmark's dots */
  --c-line-on:       #0E3E5E;   /* a line that marks: your row's bar, the selected chip's edge, the outlined button — the lake by day, grey at night */
  --c-mark:          var(--c-line-on);   /* 0.52.1: three marks only — the active tab's line, the trip page's next step, today on the Ledger; by day the marking line */
  --c-on-ok:         #FFFFFF;   /* the tick on a ticked line */
  --c-knob:          #FFFFFF;   /* the switch's knob */
  --shadow-knob:     0 1px 3px rgba(0, 0, 0, 0.3);
  --c-sw-off:        #8FA097;   /* the switch's track when off (= border-strong) */
  --c-sw-off-ring:   transparent;
  --c-knob-on:       #FFFFFF;
  --c-sw-on:         #0E3E5E;
  /* 0.52.0 — the numbers page's charts (owners only): one blue for the marks, checked for contrast and colour-blind reading;
     the period before in grey; the weeks' grid from light to dark blue */
  --c-chart:         #2a78d6;
  --c-chart-wash:    rgba(42, 120, 214, 0.10);
  --c-heat-1: #b7d3f6; --c-heat-2: #86b6ef; --c-heat-3: #3987e5; --c-heat-4: #256abf; --c-heat-5: #184f95;
  --c-heat-ink-1: #0E1011; --c-heat-ink-2: #0E1011; --c-heat-ink-3: #FFFFFF; --c-heat-ink-4: #FFFFFF; --c-heat-ink-5: #FFFFFF;
  /* a greeting's page is always the charcoal night; its share sheet stays light, like the screens */
  --c-g-wish-1: #2A2E30; --c-g-wish-2: #1C1F21; --c-g-outro-1: #2E3335; --c-g-outro-2: #181B1D;
  --c-g-sheet: #FFFFFF; --c-g-sheet-head: #F2F5F3; --c-g-sheet-line: #E6ECE9; --c-g-sheet-edge: #C7D1CC; --c-g-sheet-text: #14201A; --c-g-sheet-text-2: #3D4C45; --c-g-sheet-on: #E3EDF4; --c-g-sheet-on-fill: #0E3E5E;

  /* ---- Type ------------------------------------------------------------------ */
  /* System fonts on purpose: render instantly with no download — the app is opened
     on the water on one bar of signal. Weight never below 500 for any text. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: 34px;   /* one per page at most: the fish's headline number */
  --fs-h1:      28px;
  --fs-h2:      22px;
  --fs-h3:      19px;
  --fs-body:    17px;   /* base; 16 is the iOS no-zoom minimum, 17 buys outdoor legibility */
  --fs-small:   15px;   /* floor for any sentence */
  --fs-label:   13px;   /* tab labels and chips only — always 700 weight */

  --fw-regular: 500;    /* "regular" is 500, not 400 — thin type is banned outdoors */
  --fw-bold:    700;
  --lh-tight:   1.2;
  --lh-body:    1.45;

  /* ---- Space (4px grid) -------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

  /* ---- Touch ------------------------------------------------------------------- */
  --touch-min:     48px;   /* nothing tappable is smaller */
  --touch-input:   52px;   /* inputs and buttons */
  --touch-tab:     64px;   /* tab bar height, plus the phone's own safe-area inset */
  --touch-add:     64px;   /* Add Catch button diameter */

  /* ---- Shape ------------------------------------------------------------------- */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;
  /* ---- Icons (src/icons.js): one line weight for the set — the wordmark's ratio of stroke to height ---- */
  --icon-stroke: 2.8;
  --note-fact-weight: var(--fw-bold);   /* 0.48.0 (Zeka, 30 Oct): by day a trip note's fact line is bold — near-black and dark grey read alike */
  --shadow-raised: 0 4px 12px rgba(14, 62, 94, 0.28);   /* Add Catch only */

  /* ---- Focus (keyboard and switch-control users) ------------------------------- */
  --focus-ring: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-lake);

  /* ---- The picture of a water (Section 1): drawn by the server, coloured here ----- */
  --map-land:        #E9EFE3;
  --map-wood:        #DCE6D3;
  --map-water:       #BFD6E6;
  --map-water-edge:  #9DBFD4;
  --map-road:        #C9CFC4;
  --map-road-casing: #FFFFFF;
  --map-text:        #4B5A4E;   /* place names, scale */
  --map-water-text:  #2E5878;   /* the water's own name */
  --map-pin:         #0E3E5E;
  --map-pin-dot:     #FFFFFF;
  --map-pin-edge:    rgba(0, 0, 0, 0.25);
}

/* ---- Dark: the evening theme. Re-chosen, not inverted; ratios in the mockup. ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg:            #131516;   /* 0.11.2: charcoal — no colour in the dark (0.11.1's green-black read as olive; 0.11.0's night water made every blue add up). Not pure black (halation) */
    --fw-bold:         600;       /* 0.15.5 (Zeka, 9 Oct): light type on a dark ground reads heavier than it is — 600 at night sits where 700 sits by day, beside the wordmark's lighter night stroke */
    --c-ground:        #181B1D;   /* screen area */
    --c-surface:       #242829;   /* cards: lifted above the ground, with a visible edge */
    --c-field:         #0E1011;   /* input wells: sunk below the card */
    --c-border:        #4B5153;   /* card edges must read in a dim room */
    --c-border-strong: #7F8689;
    --c-text:          #E4E7E8;   /* one step under white, so that white links still read as links; 14.6:1 on bg, 10.9:1 on cards */
    --c-text-2:        #B0B7BA;   /* 9.4:1 on ground, 7.2:1 on cards (0.43.0: was #A9B0B3, 6.8:1 on cards) */
    --c-text-on-fill:  #FFFFFF;
    --c-lake:          #F4F6F6;   /* 0.11.2 grey on grey (the designer's eye): links, the active tab, the wordmark in white — one family with the ground, as blue-on-blue was; colour is left to what means something */
    --c-lake-fill:     #4A5256;   /* primary buttons and the segment's "on" in grey; white text 6.6:1. 0.23.0 (D2 A): a step lighter than 0.11.2's #3F4649, so the filled button leads the outlined one again */
    --c-lake-soft:     #2A2F31;   /* selected chips, the info's open state */
    --c-talk-mine:     #3A464C;   /* the talk at night — your own lines a lighter grey-blue; 0.44.0: the others' on the dark ground */
    --c-float:         #F7A578;   /* "Add" label, "to buy"; 9.3:1, 7.5:1 on cards (0.43.0: was #F5945B, 6.6:1 on cards) */
    --c-float-fill:    #BF3F14;   /* the disc; white text 5.3:1 */
    --c-float-soft:    #3A1E12;
    --c-ok:            #BFDCC5;   /* sage, not mint: a fishing day, not a terminal. 9.0:1 on ok-soft */
    --c-ok-soft:       #1E3428;
    --c-warn-bg:       #4A3606;
    --c-warn-text:     #FFD98A;   /* 8.5:1 */
    --c-danger:        #F49A91;   /* 8.5:1, 7.0:1 on cards (0.43.0: was #F08A80, 6.1:1 on cards) */
    --c-danger-fill:   #8E2A21;   /* quieter than in light; white text 8.4:1 */
    --c-danger-soft:   #3D1A17;
    --c-tick:         #4A5256;   /* 0.55.3 (Zeka, 2 Nov): a ticked box in the night buttons' grey, the tick white — the light box was "too loud". The white tick 8.0:1 */
    --c-tick-ink:     #FFFFFF;
    --c-tag-bg:        #2E3335;
    --c-gold:          #E0B84A;   /* the ring, at night */
    --c-ring-draft:    #C9A227;   /* 0.9.1: a draft waits — dark gold A, Zeka's pick, a touch deeper than the night gold */
    --c-live:          #3DB36A;   /* 0.11.0: the live dot at night — a medium sea green, turned down from the lime of the test image (Zeka: "aphids") */
    --c-likes:         #8CC4E8;   /* 0.11.2: the like's blue stays blue — the one blue on the page, a mark like the gold */
    --c-rain:          var(--c-likes);   /* 0.54.0: a chance of rain from 30% in the weather's hours — the water's blue (Zeka chose it on the bench, 2 Nov) */
    --c-gold-text:     #E0B84A;
    --c-brand-dot:     #E8622A;   /* 0.21.0, Q28 A: the dots keep their orange at night */
    --c-line-on:       #7F8689;   /* 0.43.0: at night a marking line is grey — white bars and edges were the loudest strokes on the page */
    --c-mark:          var(--c-gold);   /* 0.52.1 (Zeka with ats, 1 Nov: "nice and minimal"): the same three marks in gold at night — no rule, only these three */
    --c-on-ok:         #0E1011;   /* the tick in night ink on sage, not white on pale */
    --c-knob:          #7F8689;   /* 0.41.0 (Zeka): the switch at night — off: the dark well, a grey edge, a grey knob; on: a sage track (0.50.0, was light), a charcoal knob */
    --shadow-knob:     none;
    --c-sw-off:        #0E1011;
    --c-sw-off-ring:   #7F8689;
    --c-knob-on:       #131516;
    --c-sw-on:         #BFDCC5;   /* 0.50.0 (Zeka, 31 Oct): on is sage, the night's "yes" (= --c-ok) — the white track was the loudest thing on the page */
    --c-chart:         #3987e5;   /* 0.52.0: the numbers page's charts, at night */
    --c-chart-wash:    rgba(57, 135, 229, 0.12);
    --c-heat-1: #1c5cab; --c-heat-2: #256abf; --c-heat-3: #3987e5; --c-heat-4: #6da7ec; --c-heat-5: #9ec5f4;
    --c-heat-ink-1: #FFFFFF; --c-heat-ink-2: #FFFFFF; --c-heat-ink-3: #FFFFFF; --c-heat-ink-4: #0E1011; --c-heat-ink-5: #0E1011;
    --icon-stroke:     2.7;       /* the wordmark eases from 10 to 9.6 at night; the icons with it */
    --note-fact-weight: var(--fw-regular);   /* at night white against grey says it already */
    --shadow-raised:   0 4px 14px rgba(0, 0, 0, 0.55);
    --map-land:        #181B1D;   /* the evening picture: night, roads as hairlines */
    --map-wood:        #182430;
    --map-water:       #1B3448;
    --map-water-edge:  #3D6A8C;
    --map-road:        #4B5153;
    --map-road-casing: #131516;
    --map-text:        #A9B0B3;
    --map-water-text:  #8CC4E8;
    --map-pin:         #8CC4E8;
    --map-pin-dot:     #131516;
    --map-pin-edge:    rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg:            #131516;   /* 0.11.2: charcoal — no colour in the dark (0.11.1's green-black read as olive; 0.11.0's night water made every blue add up). Not pure black (halation) */
  --fw-bold:         600;       /* 0.15.5: as above */
  --c-ground:        #181B1D;   /* screen area */
  --c-surface:       #242829;   /* cards: lifted above the ground, with a visible edge */
  --c-field:         #0E1011;   /* input wells: sunk below the card */
  --c-border:        #4B5153;   /* card edges must read in a dim room */
  --c-border-strong: #7F8689;
  --c-text:          #E4E7E8;   /* one step under white, so that white links still read as links; 14.6:1 on bg, 10.9:1 on cards */
  --c-text-2:        #B0B7BA;   /* 0.43.0: as above */
  --c-text-on-fill:  #FFFFFF;
  --c-lake:          #F4F6F6;   /* 0.11.2 grey on grey (the designer's eye): links, the active tab, the wordmark in white — one family with the ground, as blue-on-blue was; colour is left to what means something */
  --c-lake-fill:     #4A5256;   /* 0.23.0 (D2 A): as above */
  --c-lake-soft:     #2A2F31;   /* selected chips, the info's open state */
  --c-talk-mine:     #3A464C;   /* the talk at night — your own lines a lighter grey-blue; 0.44.0: the others' on the dark ground */
  --c-float:         #F7A578;   /* 0.43.0: as above */
  --c-float-fill:    #BF3F14;   /* the disc; white text 5.3:1 */
  --c-float-soft:    #3A1E12;
  --c-ok:            #BFDCC5;   /* sage, not mint: a fishing day, not a terminal. 9.0:1 on ok-soft */
  --c-ok-soft:       #1E3428;
  --c-warn-bg:       #4A3606;
  --c-warn-text:     #FFD98A;   /* 8.5:1 */
  --c-danger:        #F49A91;   /* 0.43.0: as above */
  --c-danger-fill:   #8E2A21;   /* quieter than in light; white text 8.4:1 */
  --c-danger-soft:   #3D1A17;
  --c-tick:         #4A5256;   /* 0.55.3 (Zeka, 2 Nov): a ticked box in the night buttons' grey, the tick white — the light box was "too loud". The white tick 8.0:1 */
  --c-tick-ink:     #FFFFFF;
  --c-tag-bg:        #2E3335;
  --c-gold:          #E0B84A;   /* the ring, at night (0.9.1: was missing from the explicit dark theme) */
  --c-ring-draft:    #C9A227;   /* 0.9.1 */
  --c-live:          #3DB36A;   /* 0.11.0 */
  --c-likes:         #8CC4E8;   /* 0.11.2 */
  --c-rain:          var(--c-likes);   /* 0.54.0: a chance of rain from 30% in the weather's hours — the water's blue (Zeka chose it on the bench, 2 Nov) */
  --c-gold-text:     #E0B84A;
  --c-brand-dot:     #E8622A;   /* 0.21.0, Q28 A: the dots keep their orange at night */
  --c-line-on:       #7F8689;   /* 0.43.0: at night a marking line is grey — white bars and edges were the loudest strokes on the page */
  --c-mark:          var(--c-gold);   /* 0.52.1 (Zeka with ats, 1 Nov: "nice and minimal"): the same three marks in gold at night — no rule, only these three */
  --c-on-ok:         #0E1011;   /* the tick in night ink on sage, not white on pale */
  --c-knob:          #7F8689;   /* 0.41.0 (Zeka): the switch at night — off: the dark well, a grey edge, a grey knob; on: a sage track (0.50.0, was light), a charcoal knob */
  --shadow-knob:     none;
  --c-sw-off:        #0E1011;
  --c-sw-off-ring:   #7F8689;
  --c-knob-on:       #131516;
  --c-sw-on:         #BFDCC5;   /* 0.50.0 (Zeka, 31 Oct): on is sage, the night's "yes" (= --c-ok) */
  --c-chart:         #3987e5;   /* 0.52.0: the numbers page's charts, at night */
  --c-chart-wash:    rgba(57, 135, 229, 0.12);
  --c-heat-1: #1c5cab; --c-heat-2: #256abf; --c-heat-3: #3987e5; --c-heat-4: #6da7ec; --c-heat-5: #9ec5f4;
  --c-heat-ink-1: #FFFFFF; --c-heat-ink-2: #FFFFFF; --c-heat-ink-3: #FFFFFF; --c-heat-ink-4: #0E1011; --c-heat-ink-5: #0E1011;
  --icon-stroke:     2.7;       /* the wordmark eases from 10 to 9.6 at night; the icons with it */
  --note-fact-weight: var(--fw-regular);   /* at night white against grey says it already */
  --shadow-raised:   0 4px 14px rgba(0, 0, 0, 0.55);
  --map-land:        #181B1D;   /* the evening picture: night, roads as hairlines */
  --map-wood:        #182430;
  --map-water:       #1B3448;
  --map-water-edge:  #3D6A8C;
  --map-road:        #4B5153;
  --map-road-casing: #131516;
  --map-text:        #A9B0B3;
  --map-water-text:  #8CC4E8;
  --map-pin:         #8CC4E8;
  --map-pin-dot:     #131516;
  --map-pin-edge:    rgba(0, 0, 0, 0.5);
}