/* ==========================================================================
   Sihatuna design tokens — the shared brand layer for web and mobile.

   Loaded after site.css so the values below re-point the existing --care-*
   tokens (which every page already consumes) at the Sihatuna palette:
   Sihatuna green, watercolor blue, restrained gold, calm white and pale-blue
   surfaces. The --sihatuna-* primitives are the raw brand scale; the --care-*
   block is the mapping onto the token names the rest of the CSS reads.
   Dark values live in themes.css.
   ========================================================================== */

:root {
    /* Brand primitives */
    --sihatuna-green: #08765d;
    --sihatuna-green-dark: #055744;
    --sihatuna-green-soft: #e6f5f0;
    --sihatuna-blue: #4aa0d8;
    --sihatuna-blue-deep: #145f9e;
    --sihatuna-blue-soft: #eaf5fc;
    --sihatuna-gold: #c49a37;
    /* Gold darkened until it carries as text on light surfaces (5.05:1 on
       white). The raw gold is a decoration colour only, never text. */
    --sihatuna-gold-text: #8a6a1c;
    --sihatuna-gold-soft: #f6eed9;
    --sihatuna-ink: #163e5f;
    --sihatuna-bg: #f7fbfe;
    --sihatuna-border: #ddeaf3;

    /* Shape — cards 18-24px, buttons 14-16px */
    --sihatuna-radius-sm: .75rem;
    --sihatuna-radius-md: 1rem;
    --sihatuna-radius-lg: 1.375rem;
    --sihatuna-radius-xl: 1.75rem;
    --sihatuna-radius-pill: 999px;

    /* Soft blue-tinted elevation instead of the previous neutral grey */
    --sihatuna-shadow-sm: 0 6px 20px rgba(31, 92, 132, .07);
    --sihatuna-shadow-md: 0 14px 40px rgba(31, 92, 132, .09);
    --sihatuna-shadow-lg: 0 24px 70px rgba(31, 92, 132, .13);

    /* --care-* mapping (light theme) ------------------------------------- */

    --care-primary: var(--sihatuna-green);

    /* Foreground green for links, icons and eyebrows: 8.6:1 on white. */
    --care-primary-dark: var(--sihatuna-green-dark);

    /* Fill behind a hovered/pressed primary button; carries white (8.6:1). */
    --care-primary-pressed: var(--sihatuna-green-dark);

    /* The brand green already clears AA as a fill under white text (5.6:1),
       so the "strong" fill variant is simply the brand colour. */
    --care-primary-strong: var(--sihatuna-green);

    --care-secondary: var(--sihatuna-blue);
    --care-ink: var(--sihatuna-ink); /* 11.1:1 on white */

    /* Muted blue-grey: 5.1:1 on white, 4.65:1 on the pale-blue chip. The
       brand sheet's #71879a is reserved for large decorative text only —
       at 3.74:1 it fails AA for body copy. */
    --care-muted: #5a7184;

    --care-surface: #edf4fa;
    --care-accent: var(--sihatuna-blue-soft);
    --care-border: var(--sihatuna-border);

    /* Input edge (WCAG 1.4.11 wants 3:1): 3.7:1 on white. */
    --care-control-border: #74889b;

    /* Focus ring in the deep watercolor blue so it stays visible against
       both green fills and pale surfaces. */
    --care-focus: var(--sihatuna-blue-deep);

    --care-surface-soft: var(--sihatuna-bg);
    --care-card: #ffffff;

    /* Primary call-to-action gradient: deep green to brand green. The light
       end stop keeps white text at 4.8:1. */
    --care-gradient: linear-gradient(90.08deg, #055744 .09%, #0a8168 70.28%);
}

/* The licensed Doccure vendor sheets (doctor-search.css, booking.css,
   chat.css) load per page AFTER this file and re-declare their palette on
   :root. html:root outranks a bare :root regardless of order, so the vendor
   variables are re-pointed at the brand here instead of editing vendor files.
   --dark and the grey scale are deliberately left alone: doccure-patient.css
   inverts them for dark mode at lower specificity than this block, so
   remapping them here would break that. Dark-mode counterparts for the two
   tint variables live in themes.css. */
html:root {
    /* Bootstrap's own theme colour, which components like .nav-pills read
       directly (--bs-nav-pills-link-active-bg defaults to it). Without this
       an active tab stayed Bootstrap blue on pages the .btn overrides don't
       reach. */
    --bs-primary: var(--sihatuna-green);
    --bs-primary-rgb: 8, 118, 93;

    --primary: var(--care-primary);
    --primary-hover: var(--care-primary-pressed);
    --primary-gradient: var(--care-gradient);
    --primary-transparent: var(--care-accent);
    --primary-100: var(--care-accent);
    --secondary: var(--care-secondary);
    --secondary-hover: var(--sihatuna-blue-deep);
    /* Doccure paints prices and stars with --orange; the brand uses gold for
       those "premium detail" accents (5.05:1 on white as text). */
    --orange: var(--sihatuna-gold-text);
}