/* ============================================================
   Tangle Me Knot — COASTAL LIGHT (active palette)

   Brand colours sampled from the logo:
     #202050  script wordmark   → Indigo
     #983868  "HAIR DESIGN"     → Plum
     #0CB4D8  upper wave        → Cyan
     #2478B4  lower wave        → Deep Blue

   IMPORTANT: their bright cyan #0CB4D8 measures only 2.36:1 on
   a light ground. It is a FILL colour — buttons, the wave motif,
   rules — never text. --tmk-accent is a deepened cyan that
   passes AA; --tmk-accent-fill is the brand cyan for solid areas.

   Alternate palettes:
     css/tokens-aubergine.css      original dark aubergine/brass
     css/tokens-coastal-dark.css   dark indigo version
   Swap filenames to change. Components read roles, not colours.
   ============================================================ */

:root {

  /* --- Brand ------------------------------------------------ */
  --tmk-indigo:     #202050;
  --tmk-plum:       #983868;
  --tmk-cyan:       #0CB4D8;   /* fills only — fails as text on light */
  --tmk-blue:       #2478B4;

  /* --- Derived ---------------------------------------------- */
  --tmk-ink:        #1B1B3A;   /* body text, dark chrome */
  --tmk-cyan-deep:  #07697F;   /* cyan that survives as text (6.03:1) */
  --tmk-cyan-lt:    #5FD4EC;
  --tmk-blue-deep:  #1B5E96;
  --tmk-warm-white: #FBFAF8;
  --tmk-sand:       #F1EDE6;
  --tmk-sand-deep:  #E8E1D5;

  /* --- Surfaces --------------------------------------------- */
  --tmk-surface:      var(--tmk-warm-white);
  --tmk-surface-alt:  var(--tmk-sand);
  --tmk-surface-lift: #FFFFFF;

  /* --- Text ------------------------------------------------- */
  --tmk-text:      var(--tmk-ink);
  --tmk-text-dim:  color-mix(in srgb, var(--tmk-ink) 62%, transparent);

  /* --- Accent ----------------------------------------------- */
  --tmk-accent:             var(--tmk-cyan-deep);  /* text, links, icons */
  --tmk-accent-fill:        var(--tmk-cyan);       /* solid areas */
  --tmk-accent-fill-hover:  #0AA0C2;
  --tmk-on-accent:          #06202B;               /* text on a cyan fill */

  /* --- Chrome (deliberately dark elements) ------------------ */
  --tmk-chrome:     var(--tmk-indigo);
  --tmk-on-chrome:  #EAF7FB;

  /* --- Hero ------------------------------------------------- */
  --tmk-hero-bg:    var(--tmk-warm-white);
  --tmk-hero-tint:  color-mix(in srgb, var(--tmk-cyan) 16%, transparent);

  /* --- Lines ------------------------------------------------ */
  --tmk-rule:  color-mix(in srgb, var(--tmk-ink) 14%, transparent);

  /* --- Aliases, so no component CSS needs editing ----------- */
  --tmk-aubergine:    var(--tmk-surface);
  --tmk-aubergine-lt: var(--tmk-surface-alt);
  --tmk-brass:        var(--tmk-accent);
  --tmk-brass-lt:     var(--tmk-accent-fill);
  --tmk-blush:        var(--tmk-text);
  --tmk-bone:         var(--tmk-warm-white);
  --tmk-bone-dim:     var(--tmk-text-dim);
  --tmk-plum-lt:      var(--tmk-plum);

  /* --- Type ------------------------------------------------- */
  --tmk-display: "Instrument Serif", Georgia, serif;
  --tmk-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tmk-size-xs:  0.75rem;
  --tmk-size-sm:  0.875rem;
  --tmk-size-base: 1.0625rem;
  --tmk-size-md:  clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --tmk-size-lg:  clamp(1.5rem, 1.2vw + 1.1rem, 2rem);
  --tmk-size-xl:  clamp(2rem, 2.4vw + 1.3rem, 3rem);
  --tmk-size-2xl: clamp(2.75rem, 4.5vw + 1.4rem, 4.75rem);
  --tmk-size-3xl: clamp(3.25rem, 6.5vw + 1.5rem, 6.5rem);

  --tmk-leading-tight: 1.05;
  --tmk-leading-snug:  1.25;
  --tmk-leading-body:  1.65;
  --tmk-track-caps: 0.16em;

  /* --- Space / layout / shape / motion ---------------------- */
  --tmk-s1: 0.25rem;  --tmk-s2: 0.5rem;  --tmk-s3: 0.75rem;
  --tmk-s4: 1rem;     --tmk-s5: 1.5rem;  --tmk-s6: 2rem;
  --tmk-s7: 3rem;     --tmk-s8: 4.5rem;  --tmk-s9: 7rem;
  --tmk-section: clamp(4rem, 9vw, 8.5rem);

  --tmk-measure: 68ch;
  --tmk-container: 1240px;
  --tmk-container-narrow: 780px;
  --tmk-gutter: clamp(1.25rem, 5vw, 4rem);

  --tmk-radius-sm: 2px; --tmk-radius: 4px; --tmk-radius-lg: 10px;

  --tmk-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --tmk-dur:  240ms;
  --tmk-dur-slow: 620ms;
}

/* Inversion now flips DARK — for the occasional deep band where a
   section needs to sit forward. Used sparingly, it gives the light
   palette somewhere to breathe. */
.tmk-invert {
  --tmk-surface:      var(--tmk-indigo);
  --tmk-surface-alt:  #191940;
  --tmk-surface-lift: #2B2B63;
  --tmk-text:         #EAF7FB;
  --tmk-text-dim:     color-mix(in srgb, #EAF7FB 65%, transparent);
  --tmk-accent:       var(--tmk-cyan);
  --tmk-accent-fill:  var(--tmk-cyan);
  --tmk-on-accent:    #06202B;
  --tmk-hero-bg:      var(--tmk-indigo);
  --tmk-rule:         color-mix(in srgb, #EAF7FB 20%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --tmk-dur: 1ms; --tmk-dur-slow: 1ms; }
}