/* ==========================================================================
   Dutchmed - Design Tokens
   Single source of truth for colour, typography, spacing and elevation.
   Colours are taken verbatim from the Dutchmed Brand Book (p.22).
   ========================================================================== */

:root {
    /* --- Brand palette (Brand Book p.22) ------------------------------------ */
    --color-royal-blue: #263977; /* Quality      - headings, body, dark surfaces */
    --color-sea-green:  #49b8ab; /* Medical touch - call-to-action, accents      */
    --color-sky-blue:   #4969b0; /* Trustworthy   - links, secondary actions     */
    --color-ice-blue:   #b9c7e7; /* Transparency  - tints, soft surfaces         */
    --color-white:      #ffffff; /* Clean white                                  */

    /* --- Derived brand shades (for states & layering) ---------------------- */
    --color-royal-blue-700: #1d2c5c;
    --color-royal-blue-800: #16234a;
    --color-sea-green-600:  #3aa093;
    --color-sea-green-700:  #318a7e;
    --color-sea-green-100:  #e7f5f3; /* mint tint surface */
    --color-sea-green-200:  #c4e7e2;
    --color-sky-blue-600:   #3c569a;
    --color-ice-blue-100:   #eef2fb; /* lightest section wash */
    --color-ice-blue-200:   #dde5f5;

    /* --- Semantic colour roles -------------------------------------------- */
    --color-bg:            var(--color-white);
    --color-bg-subtle:     #f5f7fb;   /* clean, calm section background */
    --color-bg-mint:       var(--color-sea-green-100);
    --color-surface:       var(--color-white);
    --color-surface-dark:  var(--color-royal-blue);

    --color-text:          var(--color-royal-blue);   /* "use dark blue instead of black" */
    --color-text-muted:    #5b6789;
    --color-text-invert:   var(--color-white);
    --color-text-on-dark-muted: #c5cee6;

    --color-heading:       var(--color-royal-blue);
    --color-link:          var(--color-sky-blue);
    --color-link-hover:    var(--color-royal-blue);

    --color-accent:        var(--color-sea-green);     /* CTA colour */
    --color-accent-hover:  var(--color-sea-green-600);
    --color-accent-active: var(--color-sea-green-700);

    --color-border:        #e3e8f2;
    --color-border-strong: var(--color-ice-blue);
    --color-focus:         var(--color-sea-green);

    /* --- Typography -------------------------------------------------------- */
    --font-base: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --weight-regular: 400;
    --weight-bold:    700;
    --weight-black:   900;

    --text-xs:   0.75rem;   /* 12 */
    --text-sm:   0.875rem;  /* 14 */
    --text-base: 1rem;      /* 16 */
    --text-md:   1.0625rem; /* 17 */
    --text-lg:   1.25rem;   /* 20 */
    --text-xl:   1.5rem;    /* 24 */
    --text-2xl:  1.875rem;  /* 30 */
    --text-3xl:  2.25rem;   /* 36 */
    --text-4xl:  clamp(2.25rem, 1.4rem + 3.4vw, 3.25rem); /* section/hero */
    --text-5xl:  clamp(2.75rem, 1.6rem + 4.6vw, 4rem);    /* hero display */

    --leading-tight:   1.1;
    --leading-snug:    1.25;
    --leading-normal:  1.6;
    --leading-relaxed: 1.7;

    --tracking-tight:  -0.01em;
    --tracking-wide:   0.04em;
    --tracking-caps:   0.12em;

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

    --section-y: clamp(3.5rem, 2rem + 6vw, 5rem);

    /* --- Radius ------------------------------------------------------------ */
    --radius-sm:   6px;
    --radius:      10px;
    --radius-lg:   18px;
    --radius-xl:   28px;
    --radius-pill: 999px;

    /* --- Elevation (blue-tinted, soft) ------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(38, 57, 119, 0.06), 0 1px 3px rgba(38, 57, 119, 0.08);
    --shadow:    0 6px 18px rgba(38, 57, 119, 0.10);
    --shadow-lg: 0 18px 48px rgba(38, 57, 119, 0.16);

    /* --- Layout ------------------------------------------------------------ */
    --container-max: 1180px;
    --container-narrow: 760px;
    --container-pad: var(--space-3);
    --header-h: 76px;

    /* --- Motion ------------------------------------------------------------ */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 180ms var(--ease);
}