/* Lush Kingdom — Eden Vol. 3.1 patch
   Additive only. Load AFTER styles.css / tokens/colors.css. Nothing in Vol. 03 is
   removed; two values are overridden and marked. Every colour below is measured
   against its intended ground (ratios in comments, WCAG 2.1).

   Fixes: text-safe accent tones, state colours, disabled, links, focus, a surface
   contract, breakpoints and a fluid type scale. */

:root {
  /* ---- 1. Text-safe accent tones -------------------------------------------------
     Vol. 03 said full-strength accent type sits on its own wash. Marigold 600 on
     Marigold wash measured 2.44 and Cyan 600 on Cyan wash 3.18. These are the tones
     to set type in; the 500/600 steps stay for fills, marks and trims. */
  --marigold-800: #7A5205;  /* on marigold wash 5.84, on Cool Grey 5.57 */
  --cyan-800: #0B5566;      /* on cyan wash 7.08, on Cool Grey 6.76 */
  --grey-700: #3E4C59;      /* meta text on light 7.10 — replaces grey-500 for TEXT */

  /* OVERRIDE — was #E3AECB, which measured 3.65 on the Magenta ground */
  --text-on-magenta-muted: #F0C6DC;  /* 4.51 on Magenta 600 */

  /* ---- 2. State colours -----------------------------------------------------------
     Brand accents are not status colours. Marigold is the one exception: it already
     means "caution, look here" in the brand, so warning borrows its dark text tone. */
  --state-success: #17715C;        /* on light 4.76 */
  --state-success-on-dark: #5FD3AE;/* on Teal 900 5.51 */
  --state-error: #A82A16;          /* on light 5.63 */
  --state-error-on-dark: #FFA08C;  /* on Teal 900 5.14 */
  --state-warning: var(--marigold-800);      /* on light 5.57 */
  --state-warning-on-dark: var(--marigold-500); /* on Teal 900 4.80 */
  --state-info: var(--cyan-800);             /* on light 6.76 */
  --state-info-on-dark: #7FD9EC;             /* on Teal 900 6.29 */

  /* Wash grounds for state messaging — tint strength, outside the two-accent rule */
  --state-success-wash: #D8EFE7;
  --state-error-wash: #F7DED8;
  --state-warning-wash: var(--marigold-100);
  --state-info-wash: var(--cyan-100);

  /* ---- 3. Disabled ---------------------------------------------------------------- */
  --text-disabled-on-light: #8A97A3;
  --text-disabled-on-dark: #6E8C87;
  --surface-disabled-on-light: #DDE2E7;
  --surface-disabled-on-dark: #14544B;
  --disabled-opacity: 1; /* use the tokens above, not opacity — opacity muddies Brass */

  /* ---- 4. Links -------------------------------------------------------------------
     Undefined in Vol. 03, so unstyled links rendered browser blue. */
  --link-on-light: var(--magenta-700);   /* 7.19 on Cool Grey */
  --link-on-light-hover: var(--magenta-800);
  --link-on-dark: #F0C6DC;               /* 6.67 on Teal 900 */
  --link-on-dark-hover: var(--grey-100);
  --link-on-magenta: var(--grey-50);
  --link-underline-offset: 3px;

  /* ---- 5. Focus -------------------------------------------------------------------
     Vol. 03 gave a ring colour and nothing else. Two-tone ring so it survives on
     Teal, Cool Grey and Magenta alike. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-on-dark: var(--cyan-500);   /* 4.28 on Teal 900, non-text needs 3 */
  --focus-ring-on-light: var(--teal-900);
  --focus-ring-on-magenta: var(--grey-50);

  /* ---- 6. Breakpoints -------------------------------------------------------------
     Custom properties cannot be used inside @media, so these are the canonical
     values for JS, Tailwind and hand-written media queries. */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --grid-columns: 12;
  --grid-columns-md: 8;
  --grid-columns-sm: 4;

  /* ---- 7. Fluid type --------------------------------------------------------------
     The Vol. 03 scale is fixed px; a 72px hero does not survive 375px. Upper bounds
     are the Vol. 03 values exactly, so desktop is unchanged. */
  --text-hero: clamp(38px, 6.4vw, 72px);
  --text-section: clamp(28px, 4vw, 40px);
  --text-lede: clamp(17px, 1.6vw, 21px);
  --text-body: 15.5px;
  --text-caption: 10.5px;
  --measure: 66ch;        /* body copy max line length */
  --measure-display: 24ch;
}

/* ---- 8. Surface contract ----------------------------------------------------------
   Replaces the growing family of -on-light / -on-magenta component variants. Set
   data-surface once on a section; everything inside reads --text, --border, --link.
   Components should never reference --text-on-* directly again. */
[data-surface] { background: var(--surface); color: var(--text); }

[data-surface="dark"] {
  --surface: var(--teal-900);
  --surface-raised: var(--teal-800);
  --text: var(--text-on-dark);
  --text-muted: var(--text-on-dark-muted);
  --border: var(--border-on-dark);
  --link: var(--link-on-dark);
  --link-hover: var(--link-on-dark-hover);
  --focus: var(--focus-ring-on-dark);
  --text-disabled: var(--text-disabled-on-dark);
  --state-ok: var(--state-success-on-dark);
  --state-bad: var(--state-error-on-dark);
  --brass-allowed: 1;
}
[data-surface="dark-deep"] { --surface: var(--teal-950); }
[data-surface="light"] {
  --surface: var(--grey-100);
  --surface-raised: var(--grey-50);
  --text: var(--text-on-light);
  --text-muted: var(--grey-700);
  --border: var(--border-on-light);
  --link: var(--link-on-light);
  --link-hover: var(--link-on-light-hover);
  --focus: var(--focus-ring-on-light);
  --text-disabled: var(--text-disabled-on-light);
  --state-ok: var(--state-success);
  --state-bad: var(--state-error);
  --brass-allowed: 0;   /* Brass never sits on Cool Grey */
}
[data-surface="light-raised"] { --surface: var(--grey-50); }
[data-surface="magenta"] {
  --surface: var(--magenta-600);
  --surface-raised: var(--magenta-700);
  --text: var(--text-on-magenta);
  --text-muted: var(--text-on-magenta-muted);
  --border: var(--border-on-magenta);
  --link: var(--link-on-magenta);
  --link-hover: var(--grey-100);
  --focus: var(--focus-ring-on-magenta);
  --text-disabled: rgba(245, 247, 250, 0.55);
  --brass-allowed: 0;   /* Brass never sits on Magenta */
}
/* Washes inherit the light contract, with accent-toned type available */
[data-surface="wash-magenta"] { --surface: var(--magenta-100); --accent-text: var(--magenta-700); }
[data-surface="wash-marigold"] { --surface: var(--marigold-100); --accent-text: var(--marigold-800); }
[data-surface="wash-cyan"] { --surface: var(--cyan-100); --accent-text: var(--cyan-800); }
[data-surface^="wash-"] {
  --text: var(--text-on-light);
  --text-muted: var(--grey-700);
  --border: var(--border-on-light);
  --link: var(--link-on-light);
  --link-hover: var(--link-on-light-hover);
  --focus: var(--focus-ring-on-light);
  --text-disabled: var(--text-disabled-on-light);
  --brass-allowed: 0;
}

/* ---- 9. Global behaviour ---------------------------------------------------------- */
:where(a) {
  color: var(--link, var(--link-on-light));
  text-decoration-thickness: 1px;
  text-underline-offset: var(--link-underline-offset);
}
:where(a):hover { color: var(--link-hover, var(--link-on-light-hover)); }

:where(:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus, var(--focus-ring-on-light));
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}