/* EPC-Covered · design tokens · the only place values live.
   One generation. No page may define its own colours, radii or type. */

:root{
  /* ---------- surfaces: one semantic system ----------
     Three layers do the work, and the layer says what a thing IS:

       page (#F8F8F5)   the canvas everything sits on — reads white, holds a
                        trace of warmth so it is not clinical or blue-grey
       record (#FBFAF4) a professional working record region: evidence, sources,
                        judgement. Warmer than the page, never a beige block
       primary (#FFF)   an OBJECT or working plane — a card, an input, a matter,
                        a document. Pure white identifies something you read or
                        edit, so it cannot also be the environment

     Borders separate light from light; shadows are reserved for things that
     genuinely float. The token names below are the established --ec-* register
     (one source of truth, no parallel system), with the semantic names aliased
     underneath so either spelling resolves. */
  --ec-page:#f8f8f5;             /* global canvas */
  --ec-white:#ffffff;            /* primary working surface: cards, inputs, docs */
  --ec-panel:#ffffff;            /* a card IS a working surface */
  --ec-record:#fbfaf4;           /* evidence / record regions */
  --ec-cream-raised:#fbfaf4;     /* legacy name for the record surface */
  --ec-cream:#f4f3eb;            /* secondary: grouped controls, read-only meta */
  --ec-sand:#f4f3eb;
  --ec-inset:#f6f6f1;            /* inset: empty states, inactive tracks */
  --ec-hover:#f1f3ee;
  --ec-selected:#fff6da;
  --ec-disabled:#f3f3ef;

  /* semantic aliases (same values, two spellings — the surface ladder is named
     by ROLE so a reviewer can check a screen in greyscale) */
  --ec-environment:var(--ec-page);
  --ec-recessed:var(--ec-cream);
  --ec-object:var(--ec-white);
  --ec-document:var(--ec-white);

  --surface-page:var(--ec-page);
  --surface-primary:var(--ec-white);
  --surface-record:var(--ec-record);
  --surface-secondary:var(--ec-cream);
  --surface-inset:var(--ec-inset);
  --surface-hover:var(--ec-hover);
  --surface-selected:var(--ec-selected);
  --surface-disabled:var(--ec-disabled);

  --ec-pine:#1c2c21;
  --ec-pine-raised:#24382a;
  --ec-ink:#22301f;
  --ec-heading:#1c2c21;
  --ec-muted:#5c6b5e;
  --ec-rule:#dadbd3;             /* default */
  --ec-rule-soft:#e6e4da;        /* subtle */
  --ec-rule-strong:#cbc8ba;
  --border-subtle:var(--ec-rule-soft);
  --border-default:var(--ec-rule);
  --border-strong:var(--ec-rule-strong);
  --ec-glyph:#8b9689;            /* rules and glyphs only — never text */

  --ec-gold:#e5b342;             /* EPC judgement */
  --ec-gold-ink:#7a5c0f;
  --ec-gold-deep:#4a3c10;
  --ec-gold-soft:#f8f1dc;
  --ec-gold-line:#efddb0;
  --ec-gold-ground:#fdf9ee;

  --ec-green:#62854f;            /* Retrofit evidence */
  --ec-green-ink:#3e5b36;
  --ec-green-soft:#edf3ea;
  --ec-green-line:#cfe0c6;
  --ec-green-ground:#f3f8f0;

  --ec-coral:#c14138;            /* limitation / destructive */
  --ec-coral-ink:#a03a22;
  --ec-coral-soft:#fbede8;
  --ec-coral-line:#f0c7bf;
  --ec-coral-ground:#fdf4f1;

  /* reversed (on pine) */
  --ec-rev-text:#faf8f0;
  --ec-rev-soft:#cdd6c9;
  --ec-rev-muted:#a8b6a5;

  /* type */
  --ec-serif:'Source Serif 4',Georgia,serif;
  --ec-sans:'Source Sans 3',system-ui,sans-serif;
  --ec-mono:ui-monospace,Menlo,Consolas,monospace;

  /* radius register — soft working surfaces, square documents.
     The register is the register: if it has a generous corner it is editable,
     if it is square it is a professional output. Nothing in between. */
  /* The canonical cohesion ladder. The previous values (18/14/14/12/10/8) read as
     consumer software and blurred the one distinction that matters: a soft corner
     is editable, a square corner is a professional output. Sharpening the middle
     of the ladder restores that. */
  --ec-r-shell:18px;
  --ec-r-strip:14px;
  --ec-r-region:12px;
  --ec-r-panel:10px;
  --ec-r-control:9px;
  --ec-r-chip:7px;
  --ec-r-tile:11px;
  --ec-r-pill:999px;       /* destination pills and segmented choices only */
  --ec-r-doc:0;

  /* spacing rhythm */
  --ec-s1:4px; --ec-s2:8px; --ec-s3:12px; --ec-s4:16px;
  --ec-s5:20px; --ec-s6:26px; --ec-s7:32px; --ec-s8:44px; --ec-s9:64px;

  /* elevation — two raised levels, nothing more.
     Soft and wide rather than tight and dark: depth reads as air under the
     surface, never as a drawn edge. */
  --ec-shadow-shell:0 1px 0 rgba(28,44,33,.05),0 4px 12px -8px rgba(28,44,33,.20),0 22px 44px -28px rgba(28,44,33,.40);
  --ec-shadow-object:0 1px 0 rgba(28,44,33,.03),0 3px 10px -7px rgba(28,44,33,.14),0 20px 40px -26px rgba(28,44,33,.24);
  --ec-shadow-doc:0 20px 44px -30px rgba(28,44,33,.48);

  --ec-shadow-surface:0 1px 2px rgba(23,49,38,.05);
  --ec-shadow-floating:0 8px 24px rgba(23,49,38,.08);
  --shadow-surface:var(--ec-shadow-surface);
  --shadow-floating:var(--ec-shadow-floating);

  /* Referenced by ec-components.css and previously undefined: an unresolved
     var() in a transition makes the whole declaration invalid, and one in a
     colour falls back to inherit, which is how a hover state ended up
     invisible. Defined here so there is one owner. */
  --ec-t-quick:120ms ease;
  --ec-rev-dim:#a8b6a5;          /* dim text ON PINE only */

  --ec-max:1560px;
  --ec-measure:64ch;
}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ec-page);color:var(--ec-ink);font:15.5px/1.55 var(--ec-sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--ec-serif);font-weight:600;color:var(--ec-heading);letter-spacing:-.01em}
h1{font-size:clamp(30px,4.2vw,42px);line-height:1.08;letter-spacing:-.018em}
h2{font-size:27px;line-height:1.2}
h3{font-size:19px;line-height:1.3}
p{margin:0}
a{color:var(--ec-green-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--ec-heading)}
button{font:inherit;cursor:pointer;color:inherit}
code,kbd{font-family:var(--ec-mono)}
img,svg{display:block}
/* Focus: pine on light ground, gold on pine. A gold ring on gold-soft
   (pressed role buttons, gold chips) measured ~1.5:1 — invisible where it
   mattered most. Both directions now clear 3:1 everywhere. */
:focus-visible{outline:3px solid var(--ec-pine);outline-offset:2px}
.ec-shell :focus-visible,.ec-footer :focus-visible,.ec-doc-dark :focus-visible{outline-color:var(--ec-gold)}
.ec-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}




/* ---------- motion ----------
   One set of tokens, and reduced motion is handled by REASSIGNING them rather
   than writing a parallel rule set. Every transition in ec-components.css reads
   from these, so the override block below disables motion product-wide without
   any component knowing about it. */
:root{
  --ec-motion-instant:120ms;
  --ec-motion-fast:160ms;
  --ec-motion-standard:220ms;
  --ec-motion-relation:320ms;
  --ec-motion-narrative:460ms;

  --ec-motion-d-micro:2px;
  --ec-motion-d-object:5px;
  --ec-motion-d-section:10px;

  --ec-ease-control:cubic-bezier(.2,.8,.2,1);
  --ec-ease-object:cubic-bezier(.22,.61,.36,1);
  --ec-ease-narrative:cubic-bezier(.16,1,.3,1);

  --ec-stagger:50ms;
}
@media(prefers-reduced-motion:reduce){
  :root{
    --ec-motion-instant:1ms; --ec-motion-fast:1ms; --ec-motion-standard:1ms;
    --ec-motion-relation:1ms; --ec-motion-narrative:1ms;
    --ec-motion-d-micro:0px; --ec-motion-d-object:0px; --ec-motion-d-section:0px;
    --ec-stagger:0ms;
  }
}