/* =============================================================================
   Castle Medical — Design Tokens  (vars.css)
   Single source of truth for all CSS custom properties.

   Load order: vars.css → clinic-locator.css → templates.css
   Remove :root { } blocks from those files once this is in place.

   SCOPING STRATEGY
   ─────────────────
   Several tokens differ between the two main UIs:
     • .cm-finder  — Clinic Locator (map search)  — purple/magenta palette
     • .cm-single  — Single clinic / doctor pages  — standard grey palette

   :root holds the shared base values.
   Component scopes override only what differs.
   ============================================================================= */


/* 
   1. BRAND COLOURS  (never change between components)
 */
:root {
    --cm-pink:          #E31A82;
    --cm-pink-dark:     #E31A82;
    --cm-pink-medium:   #9A1CA0;
    --cm-pink-bg:       #fdf0f7;
    --cm-purple:        #6b1080;
    --cm-purple-bg:     #f7f0fa;
    --cm-blue:          #1d4ed8;
    --cm-teal:          #0e7490;
    --cm-white:         #ffffff;
}


/* 
   2. SEMANTIC COLOURS  (shared)
 */
:root {
    --cm-open:          #1B7A3D;
    --cm-open-bg:       #E8F8E8;
    --cm-open-dot:     #22C55E;

    --cm-closed:        #ef4444;
    --cm-closed-bg:     #fef2f2;

    --cm-warn:          #d97706;
    --cm-warn-bg:       #FFF8E1;
    --cm-warn-border:   #F59E0B;

    /* Legacy aliases — kept so existing code doesn't break */
    --cm-warning:       #d97706;
    --cm-warning-bg:    #fffbeb;
    --cm-warning-border: #fde68a;
}


/* 
   3. NEUTRAL PALETTE  — base (single-page defaults)
   These are overridden inside .cm-finder for the map UI purple palette.
 */
:root {
    --cm-dark:          #511954;    /* dark purple headings in locator */
    --cm-text:          #240026;    /* near-black purple body text */
    --cm-muted:         #D9AEC1;    /* pink-toned muted text */
    --cm-border:        #D792B3;    /* pink-toned borders */
    --cm-bg-grey:       #f7f7f7;
    --cm-bg-medgrey:    #DADADA;
    --cm-card-hover:    #FCF5F6;
    --cm-breadcrumbs:   #BA6F93;
    --cm-closed:        #ef4444;
    --cm-purple-midgrey:   #7A5C7C;

    --cm-muted-lt:      #9ca3af;    /* placeholder / disabled */
    --cm-border-lt:     #f0f0f0;    /* subtle dividers */
    --cm-bg-soft:       #f7f7f7;    /* page background tint */

    --cm-bg-light: #FDF8F9;


    /* Gradient used in locator hero/buttons */
    --cm-gradient:      linear-gradient(90deg, var(--cm-pink), var(--cm-pink-medium));

    /* Legacy aliases */
    --cm-grey:          #f3f4f6;
    --cm-grey-bg:       #f9fafb;
    --cm-muted-light:   #9ca3af;
    --cm-border-soft:   #F0E6EE;
}


/* 
   4. CLINIC LOCATOR OVERRIDES  (.cm-finder scope)
   The map search UI uses a warm purple/magenta palette for its neutrals.
   These only apply inside the .cm-finder wrapper.
 */
.cm-finder {
    --cm-dark:          #511954;    /* dark purple headings in locator */
    --cm-text:          #240026;    /* near-black purple body text */
    --cm-muted:         #D9AEC1;    /* pink-toned muted text */
    --cm-border:        #D792B3;    /* pink-toned borders */
    --cm-bg-grey:       #f7f7f7;
    --cm-card-hover:    #FCF5F6;
    --cm-breadcrumbs:   #BA6F93;
    --cm-open:          #34A853;
    --cm-closed:        #ef4444;
}


/* 
   5. SPACING & SHAPE
 */
:root {
    /* Radius scale */
    --r-sm:     6px;
    --r-md:     10px;
    --r-lg:     16px;
    --r-xl:     20px;
    --r-pill:   999px;

    /* Legacy aliases */
    --cm-radius:    20px;   /* locator uses 20px pill-radius cards */
    --cm-radius-lg: 16px;

    /* Layout */
    --cm-max-width: 1366px;
}


/* 
   6. ELEVATION / SHADOW
 */
:root {
    --shadow-sm:    0 1px 4px  rgba(0, 0, 0, .06);
    --shadow-md:    0 4px 20px rgba(0, 0, 0, .08);
    --shadow-lg:    0 8px 32px rgba(0, 0, 0, .10);

    /* Legacy aliases */
    --cm-shadow:    0 2px 20px rgba(0, 0, 0, .08);
    --cm-shadow-sm: 0 1px 6px  rgba(0, 0, 0, .06);
}


/* 
   7. TYPOGRAPHY
 */
:root {
    --font:     'Familjen Grotesk', system-ui, -apple-system, sans-serif;
    --cm-font:  'Familjen Grotesk', system-ui, -apple-system, sans-serif; /* legacy alias */
}

:root {
  --cm-tags--golden-bg:#FFF9F5;
  --cm-tags--golden-color:#B8860B;
  --cm-pill--sky-blue-bg:#EBF0FF;
  --cm-pill--sky-blue-color:#3B5998;
}