/* ============================================================
   STARFISH HEALTH — DESIGN TOKENS
   (file BgyZamroxJtQ4zvFxM0VqL)
   ============================================================ */

:root {
  /* --- Brand Anchors ---
     The two colors the blue family derives from. Change these and
     every derived blue (below, in the @supports block) follows. */
  --color-primary:        #218dc2;  /* primary/color8 — main blue */
  --color-secondary:      #10445f;  /* secondary/8 — deep blue */

  /* --- Brand Colors (literal fallbacks; derived overrides below) --- */
  --color-primary-hover:  #1a7bab;
  --color-navy:           #212a3d;  /* primary/color9 — nav text */
  --color-heading:        #1e3244;
  --color-heading-alt:    #28334a;
  --color-heading-soft:   #2a2a28;
  --color-heading-dark:   #1d1d1d;
  --color-blue-deep:      #1a5b7e;  /* color5 — italic accents, card titles */
  --color-blue-deeper:    #1e75a1;
  --color-footer:         #10445f;  /* secondary/8 — footer bg */
  --color-teal-deep:      #003b3b;  /* primary/9 — audience cards */
  --color-dark:           #0b2a2a;

  /* --- Light blues / borders --- */
  --color-border-chip:    #9ecfdf;  /* secondary/3 — pill chip border */
  --color-border-header:  #e2f2f6;  /* secondary/1 — header border */
  --color-divider-teal:   #b2e0e1;
  --color-divider-teal2:  #67c8c7;
  --color-divider:        #b2e0e1;  /* brand-derived override below */
  --color-icon-circle:    #62aed1;  /* secondary/4 — icon discs; derived below */
  --color-urgent:         #d97706;  /* semantic amber — urgent notices (not brand-derived) */
  /* Editor highlight: the teal box behind a phrase, set from the visual editor's Highlight button. */
  --color-highlight:      #3f8487;
  --color-divider-strong: #67c8c7;  /* brand-derived override below */
  --color-blue-pale:      #c4e5ee;  /* secondary/2 — hero tagline */
  --color-icon-bg:        rgba(205, 230, 230, 0.3);

  /* --- Backgrounds --- */
  --color-bg:             #f9fafb;
  --color-bg-section:     #f4f9f9;
  --color-bg-testimonial: #f7f9f9;
  --color-bg-white-soft:  #fefefe;
  --color-bg-audience:    #f0f8f8;
  --color-surface:        #ffffff;

  /* --- Text --- */
  --color-text:           #141414;
  --color-muted:          #727272;
  --color-muted-alt:      #555555;
  --color-gray:           #6b7280;
  --color-gray-light:     #a1a1aa;
  --color-placeholder:    #9ca3af;
  --color-border:         #e5e7eb;
  --color-border-card:    #eaf2f2;
  --color-red:            #ff3b30;
  --color-text-light:     rgba(255, 255, 255, 0.7);
  --color-body-dark:      #4a443d;
  --color-feature-label:  #7e92ae;  /* services hero feature captions */

  /* --- Dark section tokens --- */
  --dark-overlay:         rgba(18, 18, 18, 0.88);
  --dark-card-bg:         rgba(28, 28, 30, 0.6);
  --dark-card-border:     rgba(255, 255, 255, 0.08);
  --dark-card-text:       #f0f0f3;
  --hero-overlay:         rgba(0, 0, 0, 0.76);
  --contact-overlay:      rgb(30, 30, 30);   /* scrim foot */

  /* --- Typography ---
     EXPERIMENT: fully Inter — one family everywhere.
      */
  --font-display:     'Inter', sans-serif;
  --font-body:        'Inter', sans-serif;
  --font-nav:         'Inter', sans-serif;
  --font-serif:       'Inter', sans-serif;
  --font-serif-alt:   'Inter', sans-serif;
  --font-ui:          'Inter', sans-serif;
  --font-editorial:   'Inter', sans-serif;
  /* NOTO SERIF RAMP:
  --font-display:     'Noto Serif', serif;
  --font-serif:       'Noto Serif', serif;
  --font-serif-alt:   'Noto Serif', serif;
  --font-editorial:   'Noto Serif', serif;
  (body/nav/ui: Inter)
  */
  /* ORIGINAL:
  --font-display:     'Plus Jakarta Sans', sans-serif;  (Zalando Sans substitute)
  --font-body:        'Inter', sans-serif;
  --font-nav:         'Manrope', sans-serif;
  --font-serif:       'Newsreader', serif;
  --font-serif-alt:   'Crimson Pro', serif;
  --font-ui:          'DM Sans', sans-serif;
  --font-editorial:   'Instrument Serif', serif;
  */

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  0.9375rem;
  --text-md:    1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.375rem;
  --text-3xl:   1.75rem;
  --text-4xl:   2.375rem;
  --text-5xl:   3rem;
  --text-6xl:   3.5rem;
  --text-7xl:   4rem;

  /* --- Spacing --- */
  --space-1:    4px;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-30:   7.5rem;

  /* --- Border Radius --- */
  --radius-sm:    0.5rem;
  --radius-md:    0.75rem;
  --radius-lg:    1rem;
  --radius-xl:    1.25rem;
  --radius-2xl:   1.5rem;
  --radius-3xl:   1.875rem;
  --radius-pill:  0.5rem; /* 8px — was a true pill (6.25rem); every consumer now gets the square-corner treatment */
  --radius-full:  624.9375rem;

  /* --- Shadows --- */
  --shadow-header: 2px 2px 1.0625rem rgba(183, 183, 183, 0.25);
  --shadow-card:   0 4px 0.75rem rgba(0, 0, 0, 0.03);
  --shadow-nav:    0 4px 1.5rem rgba(0, 0, 0, 0.12);

  /* Layout --- The content column is a share of the viewport, not a fixed rem width, and it narrows as the screen grows so a very wide monitor does not get a full-bleed wall of text. */
  --container:        88vw;   /* < 768                       */
  --container-md:     85vw;   /* >= 768                      */
  --container-lg:     80vw;   /* >= 1024                     */
  --container-xl:     75vw;   /* >= 1280                     */
  --container-xxl:    70vw;   /* >= var(--bp-container-xxl)  */
  --bp-container-xxl: 1536px;
  --container-max:    80rem;
  --container-wide:   90rem;
  --gutter:           5rem;
  /* Horizontal inset shared by the fixed header bar and any section
     that must line up with it (Locations). Overridden at the same
     breakpoints the header compacts at — see the media queries below. */
  --page-inset:       var(--gutter);

  /* --- Transitions --- */
  --transition-base:  all 0.2s ease;
  --transition-slow:  all 0.35s ease;

  /* --- Z-index --- */
  --z-nav:      1000;
  --z-modal:    2000;
  --z-toast:    3000;
  /* Was never defined — every var(--z-dropdown, 20) call sat on its literal fallback of 20. */
  --z-dropdown: 500;
}

/* DERIVED BLUES — computed from the two brand anchors. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    /* Darker press/hover state of the primary */
    --color-primary-hover: color-mix(in srgb, var(--color-primary) 88%, black);

    /* Mid blues sit between the two anchors */
    --color-blue-deep:     color-mix(in srgb, var(--color-primary) 30%, var(--color-secondary));
    --color-blue-deeper:   color-mix(in srgb, var(--color-primary) 65%, var(--color-secondary));

    /* Footer is the secondary anchor itself */
    --color-footer:        var(--color-secondary);

    /* Light blues are tints of the primary toward white */
    --color-blue-pale:     color-mix(in srgb, var(--color-primary) 26%, white);
    --color-border-chip:   color-mix(in srgb, var(--color-primary) 43%, white);
    --color-border-header: color-mix(in srgb, var(--color-primary) 13%, white);

    /* Translucent icon wash */
    --color-icon-bg:       color-mix(in srgb, var(--color-primary) 8%, transparent);

    /* Section separators (testimonial + why-column dividers) */
    --color-divider:        color-mix(in srgb, var(--color-primary) 32%, white);
    --color-divider-strong: color-mix(in srgb, var(--color-primary) 62%, white);

    /* Contact panel photo overlay — deep blend of the secondary */
    --contact-overlay: color-mix(in srgb, var(--color-secondary) 22%, rgb(30, 30, 30));

    /* Card borders on the contact grid */
    --color-border-card: color-mix(in srgb, var(--color-primary) 9%, white);
  }
}

/* Mobile: tighter gutter for every section that pads with it */
@media (max-width: 768px) {
  :root {
    --gutter: 1.5rem;
  }
}

/* Container ladder — 88 / 85 / 80 / 75 / 70. Each step only restates
   --container, so anything reading it follows automatically. */
@media (min-width: 768px)  { :root { --container: var(--container-md); } }
@media (min-width: 1024px) { :root { --container: var(--container-lg); } }
@media (min-width: 1280px) { :root { --container: var(--container-xl); } }
@media (min-width: 1536px) { :root { --container: var(--container-xxl); } }


/* ── Page inset (keeps sections aligned with the header bar) ──── */
@media (min-width: 1121px) and (max-width: 1360px) {
  :root { --page-inset: 2rem; }
}

@media (max-width: 1120px) {
  :root { --page-inset: 1.25rem; }
}