/* ==========================================================================
   LoomReach redesign 2026 · Direction E "Showroom" · design tokens
   Source: docs/redesign-2026/DIRECTIONS_EFG.md (E) on the C token API (--lr-*).
   Contrast ratios in comments are WCAG 2.x, measured against the named surface.
   Rule: never white text on coral; on coral and mint all text is ink.
   Saturation rule: rooms are tints; full coral is one field per page (the final call to action).
   ========================================================================== */

:root {
  /* ---- Surfaces ---- */
  --lr-bg:          #FBFAF7; /* page */
  --lr-surface:     #FFFFFF; /* cards */
  --lr-sand:        #F2F0EC; /* plinths and the off-white of the C case renders */
  --lr-peach:       #FFD9C7; /* ink 14.26 · ink-2 9.19 · muted 4.78 */
  --lr-sky:         #A6E8FF; /* ink 13.91 · ink-2 8.96 · muted 4.66 */
  --lr-mint:        #3DE0A8; /* ink 11.08 · ink-2 7.14 (muted fails: 3.71) */
  --lr-peach-tint:  #FFEDE4; /* ink 16.48 · muted 5.52 */
  --lr-sky-tint:    #E2F6FD; /* ink 16.79 · muted 5.63 */
  --lr-mint-tint:   #D8F8EC; /* ink 16.54 · muted 5.55 */

  /* ---- Text ---- */
  --lr-ink:         #111216; /* 17.93 on bg */
  --lr-ink-2:       #34363D; /* 11.56 on bg */
  --lr-muted:       #5D606A; /*  6.01 on bg, 6.27 on white */
  --lr-line:        #E6E3DC; /* decorative hairline */
  --lr-line-strong: #868892; /*  3.53 on white, 3.38 on bg: form field borders */

  /* ---- Brand coral: fields and the primary button, ink text only ---- */
  --lr-brand:       #FF5A36; /* ink on coral 6.03 */
  --lr-brand-hover: #FF7652; /* ink 7.3 */
  --lr-on-brand:    #111216;
  --lr-link:        #C2381A; /* text-safe coral: 5.19 on bg, 5.42 on white */
  --lr-link-line:   #FF5A36; /* decorative underline */

  /* ---- Status ---- */
  --lr-ok:          #0A7A5A; /* 5.10 on bg */
  --lr-stop:        #B4002E; /* 6.86 on bg */
  --lr-stop-tint:   #FCE1E6;

  /* ---- Focus (two-colour ring) ---- */
  --lr-focus-outer: #111216;
  --lr-focus-inner: #FFFFFF;

  /* ---- Type ---- */
  --lr-font: "Mona Sans", "Mona Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lr-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --lr-fs-h1:    clamp(2.5rem, 1.55rem + 3.1vw, 4rem);      /* 40 → 64 px */
  --lr-fs-h2:    clamp(1.875rem, 1.35rem + 1.6vw, 3rem);    /* 30 → 48 px */
  --lr-fs-h3:    clamp(1.25rem, 1.1rem + .4vw, 1.5rem);     /* 20 → 24 px */
  --lr-fs-big:   clamp(1.375rem, 1.15rem + .7vw, 1.875rem); /* key-fact phrases */
  --lr-fs-lead:  clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --lr-fs-body:  1.0625rem;  /* 17 px; 18 px from 860 px */
  --lr-fs-small: .9375rem;   /* 15 px */
  --lr-fs-label: .8125rem;   /* 13 px mono */

  /* ---- Space ---- */
  --lr-pad: clamp(16px, 4vw, 48px);
  --lr-max: 1280px;
  --lr-gap: 16px;
  --lr-section-y: clamp(44px, 7vw, 100px);
  --lr-room-inset: clamp(8px, 1.6vw, 24px);
  /* where one room meets the next: one gap everywhere (48 px at 1440, 24 px on phones) */
  --lr-room-gap: clamp(24px, 3.4vw, 48px);
  /* Page head on every inner page: the same top padding, and the room an eyebrow takes
     (one 15 px line plus the copy gap), so every H1 lands at the same height. */
  --lr-head-top: clamp(28px, 5vw, 72px);
  --lr-copy-gap: 20px;
  --lr-eyebrow-slot: calc(.9375rem * 1.55 + var(--lr-copy-gap));

  /* ---- Radii ---- */
  --lr-r-xl: 28px;
  --lr-r-l: 22px;
  --lr-r-m: 16px;
  --lr-r-s: 12px;
  --lr-r-pill: 999px;

  /* ---- Shadows: objects only ---- */
  --lr-obj-floor: radial-gradient(closest-side, rgba(17, 18, 22, .22), rgba(17, 18, 22, 0));

  /* ---- Motion ---- */
  --lr-dur-1: 120ms;
  --lr-dur-2: 220ms;
  --lr-dur-3: 320ms;
  --lr-ease: cubic-bezier(.22, .8, .24, 1);
}

@media (max-width: 599px) {
  :root { --lr-copy-gap: 16px; }
}
@media (min-width: 860px) {
  :root { --lr-fs-body: 1.125rem; --lr-gap: 20px; }
}
@media (min-width: 1200px) {
  :root { --lr-gap: 24px; }
}

/* Metric-matched fallback while Mona Sans loads, so line breaks barely move on swap. */
@font-face {
  font-family: "Mona Sans Fallback"; src: local("Arial"), local("ArialMT");
  font-weight: 100 549; size-adjust: 103.5%;
  ascent-override: 105.3%; descent-override: 30.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Mona Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 550 900; size-adjust: 104%;
  ascent-override: 104.8%; descent-override: 30.8%; line-gap-override: 0%;
}

/* ==========================================================================
   Context classes: a room (inset coloured panel) re-points the base tokens.
   ========================================================================== */
.lr-ctx-coral {
  background: var(--lr-brand);
  --lr-ink-2: #111216;
  --lr-muted: #111216;   /* ink-2 and muted fail on coral (3.89 / 2.02) */
  --lr-line: rgba(17, 18, 22, .28);
  --lr-link: #111216;
  --lr-link-line: #111216;
  color: var(--lr-ink);
}
/* Rooms are tints only (muted >= 5.5 on each). Full coral is kept for the final call to action;
   full mint and sky appear only on objects, nodes and small marks. */
.lr-ctx-mint  { background: var(--lr-mint-tint); --lr-line: rgba(17, 18, 22, .16); --lr-link: #111216; --lr-link-line: #111216; color: var(--lr-ink); }
.lr-ctx-peach { background: var(--lr-peach-tint); --lr-line: rgba(17, 18, 22, .14); --lr-link: #111216; color: var(--lr-ink); }
.lr-ctx-sky   { background: var(--lr-sky-tint); --lr-line: rgba(17, 18, 22, .14); color: var(--lr-ink); }
/* Sand gallery for the cases: the same off-white as the C case renders, so their edges disappear.
   muted 5.51 · ink-2 10.60 · link 4.76 on sand */
.lr-ctx-sand  { background: var(--lr-sand); --lr-line: #E1DDD4; color: var(--lr-ink); }

/* Panels inside a field restore the light values */
.lr-panel {
  background: #FFFFFF;
  --lr-ink: #111216;
  --lr-ink-2: #34363D;
  --lr-muted: #5D606A;
  --lr-line: #E6E3DC;
  --lr-line-strong: #868892;
  --lr-link: #C2381A;
  --lr-link-line: #FF5A36;
  --lr-ok: #0A7A5A;
  --lr-stop: #B4002E;
  --lr-focus-outer: #111216;
  --lr-focus-inner: #FFFFFF;
  color: var(--lr-ink);
}