/* FishFly color tokens — exact values from ios/FishFly/Config/Theme.swift
   and docs/handoff/FishFly.dc.html (mckennasoftware/fishfly). */
:root {
  /* ——— Greens ——— */
  --green-primary: #1E4D3B;      /* buttons, selected chips, icon squares */
  --green-deep: #17402F;         /* recommended-setup card, header gradient bottom */
  --green-darkest: #163B2D;      /* welcome/paywall gradient bottom */
  --green-gradient-top: #235743;
  --green-tint-05: rgba(30, 77, 59, 0.05);  /* outline-button fill */
  --green-tint-10: rgba(30, 77, 59, 0.10);  /* outline-button hover */
  --green-tint-06: rgba(30, 77, 59, 0.06);  /* quiet-button hover */

  /* Full-bleed river gradient (welcome, paywall) */
  --gradient-river: linear-gradient(175deg, #235743 0%, #1E4D3B 45%, #163B2D 100%); /* @kind color */
  /* Recommendations header gradient */
  --gradient-header: linear-gradient(165deg, #235743, #1E4D3B 55%, #17402F); /* @kind color */

  /* ——— Copper (CTA / accent) ——— */
  --copper: #BE5D20;
  --copper-pressed: #A94F17;
  --copper-light: #D98E52;       /* badges, "from your location", now-dot */
  --copper-cta-text: #FFF7EF;

  /* ——— Neutrals: surfaces ——— */
  --bg-app: #F7F5F0;             /* onboarding, home, loading, check-in */
  --bg-screen: #F2F0E9;          /* recs, settings, library */
  --surface-card: #FFFFFF;
  --surface-row-hover: #FAF8F2;  /* grouped-row hover */
  --surface-hover: #F1EEE5;      /* light buttons/rows hover */
  --surface-photo: #F2F0E7;      /* photo-slot placeholder */
  --surface-chip: #FAF8F2;       /* spec-chip fill */
  --desk-bg: #E7E4DC;            /* canvas behind device frames */

  /* ——— Neutrals: lines ——— */
  --hairline: #E5E1D4;           /* card borders */
  --hairline-strong: #DDD8CA;    /* inputs, stepper */
  --divider: #EFECE1;            /* inside grouped cards */
  --border-circle: #E3DFD3;      /* circle buttons, spec chips */
  --border-quiet: #C9C4B4;       /* "Ask again", dashed notes */
  --border-dashed: #E0DCCE;      /* expanded-card rule */

  /* ——— Neutrals: ink ——— */
  --ink: #17251E;                /* screen + card titles */
  --text-body: #3D453E;
  --text-secondary: #5A6158;
  --text-muted: #7B8279;
  --text-muted-2: #8A8F85;       /* eyebrows, WHEN labels */
  --text-muted-3: #9AA095;       /* microcopy, footers */
  --text-placeholder: #A2A79D;
  --text-faint: #A8AD9F;         /* version footer, card chevron */
  --chevron: #C2BFB2;

  /* ——— On-green / dark ——— */
  --dark-pill: #2A2E2B;          /* offline pill, toast */
  --text-light: #F5F3EA;
  --text-light-90: rgba(245, 243, 234, 0.90);
  --text-light-78: rgba(245, 243, 234, 0.78);
  --text-light-72: rgba(245, 243, 234, 0.72);
  --text-light-60: rgba(245, 243, 234, 0.60);
  --text-light-45: rgba(245, 243, 234, 0.45);
  --text-on-dark: #F2F0E9;       /* toast/offline-pill label */
  --text-chip-on-green: #EDEAE0;
  --glass-fill: rgba(245, 243, 234, 0.13);   /* condition chips on green */
  --glass-border: rgba(245, 243, 234, 0.16);
  --glass-button: rgba(245, 243, 234, 0.12); /* share circle */
  --glass-button-hover: rgba(245, 243, 234, 0.20);
  --contour-stroke: rgba(245, 243, 234, 0.13); /* river line art, fades to 0.06 */

  /* ——— Fly-type badges (bg / fg) ——— */
  --badge-dry-bg: #F3E1D0;      --badge-dry-fg: #9A4A16;
  --badge-nymph-bg: #DCE7DF;    --badge-nymph-fg: #1E4D3B;
  --badge-emerger-bg: #E9E9D3;  --badge-emerger-fg: #5F6524;
  --badge-streamer-bg: #E5E2DA; --badge-streamer-fg: #57534A;

  /* ——— Counter pill ——— */
  --pill-metered-bg: #F6EAD9;   --pill-metered-fg: #8A5A2B;  --pill-metered-border: #EAD1B8;
  --pill-zero-bg: #F6DFCE;      --pill-zero-fg: #9A3E10;
  --pill-unlimited-bg: #DCE7DF; --pill-unlimited-fg: #1E4D3B; --pill-unlimited-border: #C4D5C9;

  /* ——— Saved-for-offline banner ——— */
  --banner-saved-bg: #E7EEE6;
  --banner-saved-border: #CBDCCE;
  --banner-saved-title: #1E4D3B;
  --banner-saved-body: #5A6A5E;

  /* ——— Switch-water notice (copper tint) ——— */
  --notice-bg: #F6EAD9;
  --notice-border: #EAD1B8;
  --notice-text: #6B4A26;
  --notice-link: #8A5A2B;

  /* ——— Misc control colors ——— */
  --toggle-off: #D9D5C9;
  --stone: #57534A;              /* "Tough day" fill, icon strokes, chip text */
  --setup-body: #E9EDE4;         /* body text on deep-green card */
}
/* FishFly type tokens — SF Pro (system stack), weights 600/700/800.
   Scale from ios/FishFly/Config/Typography.swift + prototype. Nothing interactive below 13px. */
:root {
  --font-sans: -apple-system, 'SF Pro Text', 'Helvetica Neue', Helvetica, sans-serif;

  /* Weights: the brand uses exactly three (+400 body) */
  --weight-heavy: 800;   /* titles, buttons, eyebrows, card names */
  --weight-bold: 700;    /* secondary buttons, pills, pack titles */
  --weight-semibold: 600;/* chips, row labels, taglines, meta emphasis */

  /* ——— Scale (px) ——— */
  --fs-price: 48px;        /* paywall $19.99, tracking -1px */
  --fs-wordmark: 46px;     /* "FishFly", tracking -1px */
  --fs-count: 40px;        /* check-in fish count */
  --fs-title-lg: 36px;     /* "Where are you fishing?", tracking -0.7px, lh 1.12 */
  --fs-title: 32px;        /* "Find your water", paywall head, tracking -0.5/-0.6px */
  --fs-title-sm: 31px;     /* check-in title, tracking -0.5px */
  --fs-section: 26px;      /* Settings / Fly library headers, tracking -0.4px */
  --fs-header: 24px;       /* recs water name, tracking -0.4px, lh 1.18 */
  --fs-tagline: 20px;      /* "Know what to tie on." 600 */
  --fs-loading: 19px;      /* loading line, 800 */
  --fs-cta: 18px;          /* CTA labels, 800, tracking -0.2px */
  --fs-body-lg: 17px;      /* card names 800 · inputs · button labels 800 · benefit copy 400 */
  --fs-button-2: 16px;     /* secondary buttons 700, setting rows 600 */
  --fs-pack: 15.5px;       /* pack-row titles 700 */
  --fs-chip: 15px;         /* date chips 600, header date, row values */
  --fs-banner: 14.5px;     /* banner titles 800, library names 800 */
  --fs-body: 14px;         /* "how to fish it" body 400, lh 1.5 */
  --fs-toast: 13.5px;      /* toasts 700, card why-lines 400 lh 1.4–1.45 */
  --fs-meta: 13px;         /* condition chips 600, counter pill 700, meta 400 */
  --fs-eyebrow: 12.5px;    /* WHEN / TRIP CHECK-IN, 800 */
  --fs-eyebrow-sm: 12px;   /* SAVED TRIP PACKS, footnotes */
  --fs-eyebrow-xs: 11px;   /* HOW TO FISH IT / RECOMMENDED SETUP */
  --fs-badge: 10.5px;      /* type badges + spec chips, 800 */
  --fs-badge-sm: 10px;     /* library-tile badges */

  /* ——— Tracking ——— */
  --tracking-eyebrow: 0.13em;     /* eyebrows 0.12–0.15em by size */
  --tracking-eyebrow-wide: 0.15em;/* TRIP PACK */
  --tracking-badge: 0.1em;
  --tracking-tight: -0.2px;       /* card titles, CTAs */
  --tracking-title: -0.5px;
  --tracking-title-lg: -0.7px;
  --tracking-display: -1px;       /* wordmark, price */

  /* ——— Line heights ——— */
  --lh-title: 1.15;   /* @kind other */ /* 1.12–1.18 across title sizes */
  --lh-body: 1.5;     /* @kind other */ /* 1.45–1.55 across body sizes */
}
/* FishFly shape tokens — radii, control heights, borders, shadows, spacing.
   Exact values from Theme.swift + prototype. All tap targets ≥ 44px. */
:root {
  /* ——— Corner radii ——— */
  --radius-input: 15px;        /* inputs, secondary/outline buttons */
  --radius-button: 16px;       /* primary CTAs */
  --radius-card: 18px;         /* fly cards, setup card */
  --radius-card-tight: 16px;   /* grouped settings/library/tab cards */
  --radius-strip: 14px;        /* THE RIG strip, banners, notices */
  --radius-segment: 12px;      /* day-plan segment inside r16 card */
  --radius-photo: 13px;        /* rec-card photo */
  --radius-photo-sm: 10px;     /* library-tile photo */
  --radius-icon-square: 22px;  /* 68px location icon square */
  --radius-thumb: 30px;        /* check-in thumb tiles */
  --radius-badge: 6px;         /* type badges, spec chips */
  --radius-badge-sm: 5px;      /* library-tile badges */
  --radius-rail: 10px;         /* rail rows, dashed notes */
  --radius-pill: 999px;

  /* ——— Control heights ——— */
  --h-cta: 58px;              /* "Get my flies", "Get FishFly Unlimited" (+ input height) */
  --h-button: 56px;           /* "Get started", "Enable Location", "Done" */
  --h-button-2: 54px;         /* "Use my location" */
  --h-button-quiet: 52px;     /* "I'll type it in", "Ask again", day-plan segment */
  --h-chip: 42px;             /* date chips */
  --h-notice-btn: 38px;       /* small copper pill in notices */
  --h-counter: 32px;          /* counter pill */
  --h-cond-chip: 30px;        /* condition chips */
  --h-trip-pill: 28px;        /* compact trip pill in header */
  --h-spec-chip: 20px;        /* time-window / tippet chips */
  --h-circle: 40px;           /* gear button */
  --h-circle-sm: 38px;        /* back button */
  --h-circle-share: 36px;     /* translucent share */
  --h-toggle: 32px;  --w-toggle: 52px;
  --h-stepper: 48px;
  --h-thumb: 118px;
  --h-icon-square: 68px;
  --h-row: 54px;              /* settings rows (min-height) */
  --h-pack-row: 58px;
  --min-tap: 44px;

  /* ——— Borders ——— */
  --bw-hairline: 1px;
  --bw-control: 1.5px;        /* inputs, chips, outline buttons */
  --bw-thumb: 2px;            /* thumb tiles */

  /* ——— Shadows ——— */
  --shadow-card: 0 1px 3px rgba(23, 37, 30, 0.05);
  --shadow-input: 0 1px 2px rgba(23, 37, 30, 0.04);
  --shadow-cta: 0 6px 16px rgba(190, 93, 32, 0.3);
  --shadow-cta-soft: 0 6px 16px rgba(190, 93, 32, 0.28);
  --shadow-cta-dark: 0 6px 18px rgba(0, 0, 0, 0.25);  /* copper CTA on green */
  --shadow-toast: 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, 0.25);

  /* ——— Screen spacing (iPhone 402×874 frame) ——— */
  --space-screen-x: 22px;      /* home; onboarding 26–28, recs/settings lists 16 */
  --space-screen-x-wide: 26px;
  --space-list-x: 16px;
  --space-top-nav: 62px;       /* recs/settings header top padding */
  --space-top-content: 84px;   /* check-in/paywall top */
  --space-top-onboard: 96px;
  --gap-cards: 10px;           /* between fly cards */
  --gap-chips: 8px;            /* date chips; condition chips 7px */
}
/* FishFly motion tokens + brand keyframes.
   Screens enter with a 0.35s ease fade + 10px rise; banners/toasts pop at 0.25–0.4s;
   loading art is a continuous dash-draw loop. Never a bare spinner. */
:root {
  --dur-screen: 0.35s;    /* @kind other */ /* screen enter */
  --dur-fade: 0.3s;       /* @kind other */
  --dur-pop: 0.35s;       /* @kind other */ /* banners; toasts 0.25s, saved banner 0.4s */
  --dur-toast: 0.25s;     /* @kind other */
  --dur-chevron: 0.25s;   /* @kind other */ /* card expand chevron 180° */
  --dur-control: 0.2s;    /* @kind other */ /* toggles, segment fills, thumb tiles */
  --ease: ease;           /* @kind other */ /* the brand uses plain ease + ease-in-out; no bounces */
  --loading-cycle: 1s;    /* @kind other */ /* loading copy line cycle */
  --toast-life: 1.6s;     /* @kind other */
}

@keyframes ffScreenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ffFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ffPop      { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ffPulse    { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@keyframes ffTie      { to { stroke-dashoffset: 0; } }