/* ============================================================
   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 */
  --status-danger:        #dc2626;
  --status-danger-hover:  #b91c1c;
  --status-danger-soft:   #fee2e2;
  --status-warning:       #d97706;
  --status-warning-soft:  #fef3e0;
  --status-success:       #16a34a;
  --status-success-soft:  #e6f5ee;
  --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;

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