/* ============================================================
   TRUE FLOW POOL SOLUTIONS — brand/tokens.css
   CANONICAL design tokens (colors, type, scale) for EVERY
   surface: website + ops (PoolBooks) + inspector (PoolInspector)
   + crew (PoolCrew) + dock (PoolDock) + any future app.

   SINGLE SOURCE OF TRUTH. The /deploy skill copies the whole
   brand/ folder into each app on every deploy, so a brand color
   or token can only ever be changed HERE. Apps consume these via
   a thin per-app alias block (legacy variable names -> these
   tokens) so existing component CSS keeps working unchanged.

   The core palette block is lifted verbatim from the live
   website's styles.css :root (the production source of truth),
   including the WCAG-AA accessibility fixes shipped 2026-06-24
   (--text-muted darkened to #456f83).

   South Beach Boutique — Miami pool water at noon. Vibrant aqua
   + cyan ocean blues, warm sand neutrals, sun-kissed gold.
   ============================================================ */
:root {

  /* ===== CORE PALETTE (verbatim from website styles.css :root) ===== */

  /* Core brand */
  --tf-cerulean:     #0b4f6c;   /* deep ocean — hero/dark sections */
  --tf-navy:         #062840;   /* midnight — footer */
  --tf-aqua-soft:    #c8eef8;   /* shallow water shimmer */
  --tf-sand:         #f5ead8;   /* warm beach sand */
  --tf-saffron:      #c9a96e;   /* sun-kissed gold */
  --tf-white:        #ffffff;

  /* Blues — vivid, coastal, saturated */
  --tf-cerulean-700: #083d56;
  --tf-cerulean-600: #0d6080;
  --tf-cerulean-500: #1a7fa0;
  --tf-aqua:         #7dd4ea;   /* bright sky/lagoon blue */
  --tf-aqua-600:     #2db5d5;   /* vivid mid aqua */
  --tf-ocean:        #1a9fc4;   /* signature pool-water cyan */
  --tf-ocean-700:    #0f7a9a;   /* deeper ocean */
  --tf-aqua-050:     #e4f7fc;   /* airy aqua wash */

  /* Neutrals — ocean-tinted (website ramp), warm not cool grey */
  --tf-ink-900:      #062840;
  --tf-ink-700:      #1a4a62;
  --tf-ink-500:      #4d7d93;
  --tf-ink-400:      #7fa3b5;
  --tf-ink-300:      #a8c8d8;
  --tf-ink-200:      #cce3ec;
  --tf-ink-100:      #e3f2f7;
  --tf-ink-050:      #f2fafc;

  /* Semantic roles (website) */
  --bg-page:         #fffdf9;   /* warm cream white, not clinical */
  --surface-trust:   #c8eef8;   /* aqua wash band */
  --surface-deep:    #0b4f6c;   /* deep ocean sections */
  --surface-deepest: #062840;   /* footer */
  --text-strong:     #062840;   /* headlines */
  --text-body:       #1a4a62;   /* body — ocean-tinted, not grey */
  --text-muted:      #456f83;   /* secondary — darkened from #4d7d93 for WCAG AA (4.5:1 on white/sand/aqua) */
  --text-on-dark:    #d8f2fb;   /* on deep/midnight sections */
  --text-link:       #1a9fc4;   /* cyan links */
  --cta-bg:          #c9a96e;   /* warm gold */
  --cta-bg-hover:    #a8844e;   /* gold hover */
  --cta-text:        #ffffff;   /* white on gold */

  /* ===== CROSS-SURFACE TOKENS (apps + design-system.md) =====
     The apps (ops/inspector/crew/dock) use a cooler neutral ramp
     and a set of status colors the marketing site doesn't. These
     are canonical brand values too (per Resources/design-system.md)
     and live here so apps can source them from one file. The cool
     ramp (--app-*) and the ocean ramp (--tf-ink-*) intentionally
     COEXIST — do not collapse them without a previewed restyle.
     ----------------------------------------------------------- */

  /* Cool neutral ramp — apps (design-system.md "warm sand, not grey") */
  --app-text-primary:   #1a2332;   /* primary body text (dock --text) */
  --app-text-secondary: #6b7c8d;   /* muted labels (dock --muted) */
  --app-border:         #e8e2d8;   /* warm border/divider (dock --line) */
  --app-border-soft:    #f0ece2;
  --app-bg-blue:        #e6f3f8;   /* pale ocean secondary fill */
  --app-surface:        #ffffff;   /* card surface */

  /* Status colors — shared across apps.
     NOTE: --status-{success,warning,danger,info} are FILL/ICON colors. They do
     NOT pass WCAG AA as text on their own -soft background (#16a34a on #e6f5ee
     is 2.93:1, #d97706 on #fef3e0 is 2.90:1). Use the -text member for any
     text or an inline status word; it is the same hue darkened to clear 4.5:1.
     Added 2026-07-30 after the visit report page was found defining its own
     private copy of this palette, having drifted on exactly these two values. */
  --status-danger:         #dc2626;
  --status-danger-hover:   #b91c1c;
  --status-danger-soft:    #fee2e2;
  --status-warning:        #d97706;
  --status-warning-soft:   #fef3e0;
  --status-warning-border: #f0d08a;
  --status-warning-text:   #9a5b00;   /* 4.94:1 on -soft */
  --status-success:        #16a34a;
  --status-success-soft:   #e6f5ee;
  --status-success-border: #a3d9b8;
  --status-success-text:   #157a3a;   /* 4.81:1 on -soft */
  --status-info:           #2563eb;
  --status-info-soft:      #e2f3f8;

  /* Effects */
  --shadow-sm:       0 1px 3px rgba(6,40,64,0.08), 0 1px 2px rgba(6,40,64,0.05);
  --shadow-md:       0 6px 16px -6px rgba(11,79,108,0.18), 0 2px 6px -2px rgba(11,79,108,0.10);
  --shadow-lg:       0 18px 40px -12px rgba(11,79,108,0.24), 0 6px 14px -8px rgba(11,79,108,0.12);
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --radius-pill:     999px;
  --ease-standard:   cubic-bezier(0.4,0,0.2,1);
  --duration-base:   200ms;

  /* Spacing — 4px base grid (apps) */
  --space-1:  4px;   --space-2:  8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;   --space-6: 24px;   --space-8: 32px;  --space-10: 40px;
  --space-12: 48px;

  /* Typography */
  --font-display:    "Libre Baskerville", Georgia, serif;
  --font-sans:       "Inter", system-ui, -apple-system, sans-serif;

  /* ── Type scale ───────────────────────────────────────────────────────────
     Added 2026-08-09. This file's own header has always claimed to be canonical
     for "colors, TYPE, scale" and carried no type scale at all, so every surface
     picked its own sizes. The website drifted UP and stayed readable; PoolBooks
     drifted DOWN and became hard to read: ~90 hand-picked sizes between .62rem
     and .82rem (10px-13px), where the WEBSITE'S SMALLEST body text is .88rem and
     its body is 1.0625rem. The admin's ceiling was roughly the website's floor.

     Values are derived from the website's live, approved usage rather than
     invented, so adopting them moves an app toward the look we already ship.

     --fs-eyebrow is the ONLY member below --fs-xs, and it is not a small-text
     licence: it is for UPPERCASE, letter-spaced section labels ONLY, where the
     caps make up the lost x-height. Never use it for a sentence.
     --fs-xs is the FLOOR for anything a person has to read or act on. If a
     layout only fits by going under it, the layout is wrong, not the type. */
  --fs-eyebrow:  0.72rem;   /* 11.5px — uppercase tracked labels only */
  --fs-xs:       0.8125rem; /* 13px — metadata, badges, timestamps. Hard floor. */
  --fs-sm:       0.875rem;  /* 14px — secondary text, dense table cells */
  --fs-base:     0.9375rem; /* 15px — default UI body inside apps */
  --fs-md:       1.0625rem; /* 17px — website body copy, long-form reading */
  --fs-lg:       1.25rem;   /* 20px — card titles, panel headings */
  --fs-xl:       1.5rem;    /* 24px — section headings */
  --fs-2xl:      2rem;      /* 32px — page titles */
  --fs-3xl:      2.5rem;    /* 40px — hero / big stat numbers */

  --lh-tight:    1.25;      /* headings */
  --lh-snug:     1.45;      /* dense UI rows */
  --lh-base:     1.6;       /* body */
  --lh-loose:    1.75;      /* long-form marketing copy */

  /* ── Icon sizes ───────────────────────────────────────────────────────────
     Icons were being drawn at 12-14px next to 10-11px text, which is why the
     carets and chevrons read as decoration rather than as controls. --icon-md is
     the default; anything a finger or cursor is meant to hit uses --icon-md or
     larger and gets --tap-min of clickable area regardless of the glyph size. */
  --icon-sm:     16px;      /* inline, decorative, inside a line of text */
  --icon-md:     20px;      /* DEFAULT — buttons, list affordances, carets */
  --icon-lg:     24px;      /* primary actions, empty states */
  --icon-xl:     32px;      /* feature/marketing */
  --tap-min:     44px;      /* minimum hit target, per WCAG 2.5.5 */

  /* Layout & legacy compatibility */
  --max-w:           1120px;
  --border:          rgba(6,40,64,0.10);
  --border-blue:     rgba(26,159,196,0.22);
}