/* ============================================================================
   GOTOTHERAPY — DESIGN TOKENS
   Brand Guidelines v1.0, Sections 03, 04, 06, 07.

   This file is the authoritative source for colour, radius, shadow and easing.
   Per the brand document's version-control note: if this file and the PDF ever
   disagree, this file is correct and the PDF is reissued.

   Token names match the brand document exactly (Navy, Slate, Sky, Wash, Paper,
   Clay, Ink). The previous mockup used --forest / --sage, which were leftovers
   from an abandoned "oatmeal" direction and did not describe the colours they
   held. Legacy aliases are kept at the bottom so existing Elementor custom CSS
   does not break during migration.
   ========================================================================== */

:root {
  /* ---- Core palette (Brand §03) ---------------------------------------- */
  --navy:        #0D2C42;   /* Deep Navy   — footer, reversed surfaces */
  --slate:       #14405C;   /* Slate Blue  — primary actions, display ink */
  --sky:         #7FB2D6;   /* Sky         — non-text only. Never for type. */
  --sky-soft:    #CFE3F2;   /* Sky Soft    — tints, dividers */
  --wash:        #E7F1F9;   /* Wash        — icon circles, CTA band */
  --paper:       #F1F6FB;   /* Paper       — page background */
  --paper-deep:  #E1ECF5;   /* Paper, one step down — toggle troughs */
  --surface:     #FCFDFF;   /* Surface     — cards, inputs */
  --clay:        #C77B4E;   /* Clay        — see the clay rule below */
  --clay-soft:   #F6E5D8;

  /* ---- Text colours (Brand §03) ---------------------------------------- */
  --ink:         #10202E;   /* 15.1:1 on Paper — all text sizes */
  --ink-soft:    #42586C;   /*  6.8:1 on Paper — all text sizes */

  /* Ink Mute: MEASURE, NOT THE DOCUMENT.
     Brand §03 lists this as 4.6:1 on Paper and approves it for "body and
     above". Measured with the WCAG relative-luminance formula it is 4.13:1 on
     Paper and 4.42:1 on Surface — below the 4.5:1 floor at every text size.
     The document's own accessibility table is wrong on this one row.
     Ink Mute is therefore used for non-text only in this theme. Anywhere the
     mockup used it for type, --ink-soft is used instead. */
  --ink-mute:    #66798B;

  /* Corrected Ink Mute, if you want to keep a third grey for type:
     4.84:1 on Paper, 5.17:1 on Surface. Passes AA at every size. */
  --ink-mute-aa: #5C6E7F;

  /* Reversed text. The mockup's #8FA9BC (5.9:1) and #7C95A8 (4.6:1) both pass
     AA on Navy, but 4.6:1 at 13px leaves no margin at all once a device
     applies its own contrast reduction. Raised for headroom, not to fix a
     failure. */
  --paper-on-navy:      #EEF5FA;   /* 15.4:1 */
  --ink-soft-on-navy:   #B9CEDF;   /*  8.9:1 */
  --ink-mute-on-navy:   #A6BED2;   /*  7.5:1 */

  /* ---- Lines ----------------------------------------------------------- */
  --line:        rgba(16, 32, 46, .13);
  --line-soft:   rgba(16, 32, 46, .075);
  --line-navy:   rgba(201, 218, 231, .22);

  /* ---- Semantic (Brand §03 — deliberately outside the brand palette) ---- */
  --ok:          #2E7D5B;
  --warn:        #B07A1E;
  --error:       #B23A2F;
  --info:        var(--slate);

  /* ---- Radius (Brand §06) ---------------------------------------------- */
  --r-input:     12px;
  --r-field:     18px;
  --r-card:      26px;
  --r-panel:     36px;
  --r-pill:      999px;

  /* ---- Elevation (Brand §06) — always blue-tinted, never neutral black -- */
  --shadow-s:    0 1px 2px rgba(16, 32, 46, .04), 0 4px 12px rgba(16, 32, 46, .06);
  --shadow-m:    0 2px 4px rgba(16, 32, 46, .04), 0 12px 28px rgba(16, 32, 46, .09);
  --shadow-l:    0 4px 8px rgba(16, 32, 46, .05), 0 24px 60px rgba(16, 32, 46, .14);

  /* ---- Type (Brand §04) ------------------------------------------------- */
  --display:     "Instrument Serif", Georgia, serif;
  --ui:          "Schibsted Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  /* Never system-ui. It shifts the brand across platforms. */

  /* ---- Motion (Brand §07) ----------------------------------------------- */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --t-hover:     350ms;
  --t-reveal:    800ms;
  --t-toggle:    400ms;

  /* ---- Layout ----------------------------------------------------------- */
  --wrap:        1200px;
  --gut:         clamp(1.25rem, 5vw, 3rem);
  --tap:         44px;   /* minimum tap target, Brand §08 */
}

/* ---------------------------------------------------------------------------
   THE CLAY RULE (Brand §03)
   Clay appears in at most three places per screen. It is never used for a
   button, never for a background panel, and never for a warning or error
   state. On the homepage the three permitted appearances are:
     1. the wordmark dot
     2. one tag in the issue grid
     3. the focus ring (functional, per Brand §08)
   The mockup also put Clay on the H1 underline and on every therapist card's
   specialism label, which took it to six-plus appearances and — at 14px —
   failed WCAG AA at 3.2:1. Both were removed.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   LEGACY ALIASES — remove once no Elementor custom CSS references them.
   ------------------------------------------------------------------------ */
:root {
  --forest:      var(--slate);
  --forest-deep: var(--navy);
  --sage:        var(--sky);
  --sage-soft:   var(--sky-soft);
  --sage-wash:   var(--wash);
  --r-sm:        var(--r-input);
  --r-md:        var(--r-field);
  --r-lg:        var(--r-card);
  --r-xl:        var(--r-panel);
}