/* ==========================================================================
   Patient Choice — Coastal Palette
   Design System v2.1 · PRIMITIVES
   --------------------------------------------------------------------------
   Extracted from Figma "Software" (file dkeA87APVZ88xI0Fm9Acsp), page
   "🎨 Colour Variables/Tokens" (node 815:1999). Layer names there are authored
   to match token paths, so `colour/harbour/500` becomes `--colour-harbour-500`.

   NAMING: British spelling ("colour") is deliberate — it mirrors Figma exactly.
   One vocabulary across design and code means no translation layer and no
   drift, which is the whole point: the old system had --text vs
   --theme-text-primary vs --text-primary for the same idea.

   THIS FILE IS PRIMITIVES ONLY — raw palette values, no meaning attached.
   Components must NOT consume these directly; they consume the semantic role
   tokens (surface / text / border / intent) defined in semantic.css. That
   indirection is what makes theming possible: a role can be repointed for dark
   mode, a primitive can't.

   Additive by design: nothing here overrides existing portal CSS. It is only
   loaded when the ?ui=next flag is on (staging only).
   ========================================================================== */

:root {
    /* ── Named colours ────────────────────────────────────────────────────
       The nine brand colours. Each is the 500 step of its scale below, except
       seafoam (200) and harbour-light (an alias of harbour/400). */
    --colour-meadow:        #72BA7C;  /* brand green            */
    --colour-harbour:       #0C75A8;  /* primary blue           */
    --colour-rockpool:      #557A9E;  /* secondary blue         */
    --colour-marram:        #CAD963;  /* accent yellow-green    */
    --colour-sea-pink:      #D96865;  /* accent red-pink        */
    --colour-golden-hour:   #F59650;  /* accent amber           */
    --colour-seafoam:       #EFF7F5;  /* off-white              */
    --colour-flint:         #3A4A50;  /* dark / body copy       */
    --colour-pebble:        #737E85;  /* neutral grey (cool)    */
    --colour-harbour-light: #3A9FD4;  /* alias of harbour/400   */

    /* ── Meadow — brand green ───────────────────────────────────────────── */
    --colour-meadow-50:  #F2FAF3;
    --colour-meadow-100: #E0F4E2;
    --colour-meadow-200: #BCE6C1;
    --colour-meadow-300: #97D69E;
    --colour-meadow-400: #84C88A;
    --colour-meadow-500: #72BA7C;
    --colour-meadow-600: #5A9B63;
    --colour-meadow-700: #437B4A;
    --colour-meadow-800: #2D5C32;
    --colour-meadow-900: #173D1B;

    /* ── Harbour — primary blue ─────────────────────────────────────────── */
    --colour-harbour-50:  #EBF5FB;
    --colour-harbour-100: #CCE7F5;
    --colour-harbour-200: #99CEE9;
    --colour-harbour-300: #66B6DE;
    --colour-harbour-400: #3A9FD4;
    --colour-harbour-500: #0C75A8;
    --colour-harbour-600: #0A5E86;
    --colour-harbour-700: #074763;
    --colour-harbour-800: #053142;
    --colour-harbour-900: #021A21;

    /* ── Rockpool — secondary blue ──────────────────────────────────────── */
    --colour-rockpool-50:  #EEF3F7;
    --colour-rockpool-100: #D4E2ED;
    --colour-rockpool-200: #A9C4DB;
    --colour-rockpool-300: #7EA7C9;
    --colour-rockpool-400: #6A90B3;
    --colour-rockpool-500: #557A9E;
    --colour-rockpool-600: #43627E;
    --colour-rockpool-700: #324A5F;
    --colour-rockpool-800: #22313F;
    --colour-rockpool-900: #111920;

    /* ── Marram — accent yellow-green ───────────────────────────────────── */
    --colour-marram-50:  #FAFDE8;
    --colour-marram-100: #F3F9CC;
    --colour-marram-200: #E6F199;
    --colour-marram-300: #DAEA80;
    --colour-marram-400: #D4E26F;
    --colour-marram-500: #CAD963;
    --colour-marram-600: #A2AD4F;
    --colour-marram-700: #7A823B;
    --colour-marram-800: #515628;
    --colour-marram-900: #292B14;

    /* ── Sea Pink — accent red-pink ─────────────────────────────────────── */
    --colour-sea-pink-50:  #FBF0F0;
    --colour-sea-pink-100: #F5D9D8;
    --colour-sea-pink-200: #EBB3B1;
    --colour-sea-pink-300: #E28D8A;
    --colour-sea-pink-400: #DE7A78;
    --colour-sea-pink-500: #D96865;
    --colour-sea-pink-600: #C04644;
    --colour-sea-pink-700: #903433;
    --colour-sea-pink-800: #602222;
    --colour-sea-pink-900: #301111;

    /* ── Golden Hour — accent amber ─────────────────────────────────────── */
    --colour-golden-hour-50:  #FEF5EC;
    --colour-golden-hour-100: #FDE4CE;
    --colour-golden-hour-200: #FBC99D;
    --colour-golden-hour-300: #F9AE6C;
    --colour-golden-hour-400: #F7A25E;
    --colour-golden-hour-500: #F59650;
    --colour-golden-hour-600: #E07A2A;
    --colour-golden-hour-700: #AA5C20;
    --colour-golden-hour-800: #713D15;
    --colour-golden-hour-900: #391F0B;

    /* ── Seafoam — off-white / light surfaces ───────────────────────────
       NB the scale starts at pure white; the named --colour-seafoam is the
       200 step, not 500. */
    --colour-seafoam-50:  #FFFFFF;
    --colour-seafoam-100: #F7FBFA;
    --colour-seafoam-200: #EFF7F5;
    --colour-seafoam-300: #D8EDE9;
    --colour-seafoam-400: #C0E3DC;
    --colour-seafoam-500: #A8D9D0;
    --colour-seafoam-600: #7BBFB5;
    --colour-seafoam-700: #4E9F94;
    --colour-seafoam-800: #347F75;
    --colour-seafoam-900: #1A5F57;

    /* ── Flint — dark / body copy ───────────────────────────────────────── */
    --colour-flint-50:  #ECEEF0;
    --colour-flint-100: #D0D5D8;
    --colour-flint-200: #A1ABB0;
    --colour-flint-300: #728088;
    --colour-flint-400: #566069;
    --colour-flint-500: #3A4A50;
    --colour-flint-600: #2E3B40;
    --colour-flint-700: #232C30;
    --colour-flint-800: #171E20;
    --colour-flint-900: #0C0F10;

    /* ── Pebble — neutral grey (cool) ───────────────────────────────────── */
    --colour-pebble-50:  #F4F6F8;
    --colour-pebble-100: #EEEEEE;
    --colour-pebble-200: #D8DDE0;
    --colour-pebble-300: #BCC4C9;
    --colour-pebble-400: #97A1A8;
    --colour-pebble-500: #737E85;
    --colour-pebble-600: #576068;
    --colour-pebble-700: #3F474D;
    --colour-pebble-800: #2A3034;
    --colour-pebble-900: #171B1D;

    /* ── Gradients ──────────────────────────────────────────────────────
       Each is published in Figma as a css token plus its from/to stops, so
       both the ready-made gradient and its endpoints are available.

       ANGLE IS 90deg (left → right), per Justin's palette reference sheet.
       This was 135deg here on first extraction — the token page doesn't state
       an angle, so it was a placeholder. Corrected 2026-08-11 after the sheet
       confirmed it; don't reintroduce a diagonal without checking dev mode. */
    --gradient-shoreline-from:  #0C75A8;
    --gradient-shoreline-to:    #72BA7C;
    --gradient-shoreline:       linear-gradient(90deg, #0C75A8, #72BA7C);

    --gradient-sea-verge-from:  #5BBF6A;
    --gradient-sea-verge-to:    #A0E9AB;
    --gradient-sea-verge:       linear-gradient(90deg, #5BBF6A, #A0E9AB);

    --gradient-open-water-from: #3A9FD4;
    --gradient-open-water-to:   #4EB6EC;
    --gradient-open-water:      linear-gradient(90deg, #3A9FD4, #4EB6EC);

    --gradient-last-light-from: #E85E58;
    --gradient-last-light-to:   #F59040;
    --gradient-last-light:      linear-gradient(90deg, #E85E58, #F59040);

    --gradient-dune-crest-from: #F59040;
    --gradient-dune-crest-to:   #C8D44A;
    --gradient-dune-crest:      linear-gradient(90deg, #F59040, #C8D44A);
}