/* ============================================================
   TQ POOL SERVICES — DESIGN TOKENS
   Three-layer architecture: primitive → semantic → component
   Edit primitives only; semantic + component layers cascade.
   ============================================================ */

:root {
  /* ---------- PRIMITIVE: raw values ---------- */

  /* Pool blues — clean, crisp, water-bright. Calibrated against the
     TQ Pool Services logo (~#1565C0) — less teal, more sky/sea. */
  --blue-50:  #EAF4FB;
  --blue-100: #CCE2F4;
  --blue-200: #9DC8EA;
  --blue-300: #6DAEDF;
  --blue-400: #3D93D3;
  --blue-500: #1E78C5;
  --blue-600: #1565C0;   /* brand — matches the logo */
  --blue-700: #0D4A99;
  --blue-800: #0A3676;
  --blue-900: #082754;

  /* Sky — bright water-light accent (replaces the dropped sun yellow).
     Use sparingly for hover lifts, badges, sparkle moments. */
  --sky-300: #8FD3F0;
  --sky-400: #5BBCE6;
  --sky-500: #2DA1D6;

  /* Coral — kept for danger / emergency only (e.g. "green pool" badge) */
  --coral-500: #F26D5B;
  --coral-600: #D85541;

  /* Neutrals — sand-toned warm greys */
  --sand-50:  #FBF9F5;
  --sand-100: #F4F0E8;
  --sand-200: #E5DECF;
  --sand-300: #C9BFA8;
  --sand-400: #968B73;
  --sand-500: #6A6151;
  --sand-700: #3A352C;
  --sand-900: #1A1814;

  /* Semantic neutrals */
  --white: #FFFFFF;
  --black: #0A0A0A;

  /* Type scale (modular 1.25) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  4rem;      /* 64 */
  --fs-6xl:  5.25rem;   /* 84 */

  /* Spacing (4px base) */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* Radii — Salt Editorial uses ASYMMETRIC pairs as a signature.
     Use --r-asym-* on cards/tiles, --r-pill on buttons. Avoid uniform radii. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --r-asym-1: 14px 4px 14px 4px;   /* tradesperson hand — primary tile */
  --r-asym-2: 4px 14px 4px 14px;   /* mirrored — alternates with asym-1 */
  --r-asym-3: 22px 6px 22px 6px;   /* larger, for media/figures */
  --r-asym-4: 6px 22px 6px 22px;   /* mirrored asym-3 */
  --r-asym-5: 28px 8px 28px 8px;   /* hero-scale, for big surface cards */
  --r-asym-6: 8px 28px 8px 28px;   /* mirrored asym-5 */

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(8, 66, 90, 0.08);
  --sh-md: 0 6px 16px rgba(8, 66, 90, 0.10);
  --sh-lg: 0 18px 40px rgba(8, 66, 90, 0.14);
  --sh-glow: 0 0 0 4px rgba(56, 168, 205, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 520ms;

  /* ---------- SEMANTIC: purpose aliases ---------- */
  --color-bg:           var(--sand-50);
  --color-bg-alt:       var(--white);
  --color-bg-deep:      var(--blue-900);
  --color-surface:      var(--white);
  --color-surface-alt:  var(--blue-50);

  --color-fg:           var(--blue-900);
  --color-fg-muted:     var(--sand-500);
  --color-fg-on-deep:   var(--sand-50);

  --color-primary:      var(--blue-600);
  --color-primary-hover:var(--blue-700);
  --color-primary-fg:   var(--white);

  --color-accent:       var(--sky-500);
  --color-accent-hover: var(--blue-500);
  --color-accent-fg:    var(--white);

  /* Backwards-compat aliases for any leftover --sun-* references.
     Mapped to sky/blue tokens so yellow can never sneak back. */
  --sun-400: var(--sky-400);
  --sun-500: var(--sky-500);
  --sun-600: var(--blue-500);

  --color-danger:       var(--coral-500);
  --color-danger-fg:    var(--white);

  --color-border:       var(--sand-200);
  --color-border-strong:var(--blue-200);

  --color-success:      #2E8C5A;
  --color-warning:      #D49808;

  /* Typography roles */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  /* ---------- COMPONENT: per-component ---------- */
  --btn-primary-bg:       var(--color-primary);
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-primary-fg:       var(--color-primary-fg);
  --btn-radius:           var(--r-pill);
  --btn-pad-y:            0.95rem;
  --btn-pad-x:            1.75rem;

  --card-bg:     var(--color-surface);
  --card-border: 1px solid var(--color-border);
  --card-radius: var(--r-asym-1);
  --card-shadow: var(--sh-md);

  /* Section vertical rhythm — keeps every page on a consistent measure */
  --section-pad-y:    clamp(var(--sp-8), 8vw, var(--sp-9));
  --section-pad-y-lg: clamp(var(--sp-9), 10vw, var(--sp-10));

  --nav-bg:     rgba(255, 255, 255, 0.85);
  --nav-blur:   saturate(180%) blur(14px);
  --nav-height: 76px;

  --hero-overlay: linear-gradient(180deg, rgba(8,66,90,0.10) 0%, rgba(8,66,90,0.55) 100%);
}

/* Optional dark theme — flip semantic layer only */
[data-theme="dark"] {
  --color-bg:          var(--blue-900);
  --color-bg-alt:      var(--blue-800);
  --color-surface:     var(--blue-800);
  --color-surface-alt: var(--blue-700);
  --color-fg:          var(--sand-50);
  --color-fg-muted:    var(--sand-300);
  --color-border:      rgba(255,255,255,0.08);
  --nav-bg:            rgba(8, 66, 90, 0.85);
}