/* Evince design tokens — copied from evince-site/styles/evince.css.
 * Source of truth is https://evince.app and github.com/evince-app/evince-site.
 * Do not invent values here. If a role has no token, add one named for the ROLE
 * (--ev-step-active-fg), never for the colour (--ev-brownish).
 */
:root {
  color-scheme: light;

  /* Palette — the seven earth tones, plus the two neutral grounds. */
  --ev-rust:       #7A3E2B; /* dark surfaces, deep text */
  --ev-sand:       #E7D8C5; /* light surfaces */
  --ev-terracotta: #C86A4A; /* the one hero accent */
  --ev-mustard:    #D4A32A; /* emphasis on dark only */
  --ev-teal:       #3D6D6E; /* secondary, data */
  --ev-olive:      #6B705C; /* muted, supporting text */
  --ev-role-source-fg: var(--ev-olive); /* the 'full description on ESCO' caption */
  --ev-clay:       #D48D7A; /* soft, tertiary, on rust */
  --ev-cream:      #FDFBF7; /* cards on sand */
  --ev-page:       #F2EDE6; /* the page ground behind a sheet */

  /* Semantic roles — prefer these over raw palette names. */
  --ev-text-deep:      var(--ev-rust);
  --ev-text-muted:     var(--ev-olive);
  --ev-text-on-rust:   var(--ev-sand);
  --ev-text-on-rust-muted: rgba(231, 216, 197, 0.9);
  --ev-accent:         var(--ev-terracotta);
  --ev-accent-on-rust: var(--ev-mustard);

  /* Rules and dividers are always rust at low opacity — never accent bars. */
  --ev-rule:         rgba(122, 62, 43, 0.14);
  --ev-rule-strong:  rgba(122, 62, 43, 0.16);
  --ev-rule-link:    rgba(122, 62, 43, 0.30);
  --ev-rule-link-2:  rgba(122, 62, 43, 0.35);
  --ev-rule-on-rust: rgba(231, 216, 197, 0.35);

  /* Type */
  --ev-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* Named for its role, not its shape: the caption that says where a fact came from. Monospace
     because a provenance line is a citation — it is read for precision, not for flow. */
  --ev-font-source: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ev-font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* Scale. Upper bounds are the spec sizes, reached at >= ~1240px. */
  --ev-size-display: clamp(2.75rem, 7.75vw, 6rem);    /* 96 */
  --ev-size-h1:      clamp(2.125rem, 4.2vw, 3.25rem); /* 52 */
  --ev-size-h2:      clamp(1.625rem, 2.75vw, 2.125rem); /* 34 */
  --ev-size-quote:   clamp(1.375rem, 2.4vw, 1.875rem); /* 30 */
  --ev-size-lead:    1.25rem;   /* 20 */
  --ev-size-body:    1rem;      /* 16 */
  --ev-size-small:   0.9375rem; /* 15 */
  --ev-size-fine:    0.8125rem; /* 13 */
  --ev-size-eyebrow: 0.75rem;   /* 12 */

  --ev-leading-display: 0.95;
  --ev-leading-h1: 1.1;
  --ev-leading-h2: 1.2;
  --ev-leading-lead: 1.6;
  --ev-leading-body: 1.65;
  --ev-leading-loose: 1.9;

  --ev-tracking-wordmark: 0.14em;
  --ev-tracking-eyebrow: 0.2em;
  --ev-tracking-tagline: 0.42em;

  /* Space */
  --ev-space-1: 6px;
  --ev-space-2: 10px;
  --ev-space-3: 14px;
  --ev-space-4: 20px;
  --ev-space-5: 26px;
  --ev-space-6: 36px;
  --ev-space-7: 48px;
  --ev-space-8: 64px;
  --ev-space-9: 72px;

  /* Shape */
  /* The reading measure. Named for its role, and it is a MEASURE, not a container width: the
     container is 960 and a card's content box is 904px = 101 characters, which is far past the
     45-75 a line should be. Every long-form paragraph is capped here. Where a box holds nothing
     BUT prose, the box takes this measure too (.card--prose) so it stops advertising 294px of
     empty space to the right of its own text. */
  /* 75ch — the top of the comfortable 45-75 range, and the whole layout is built around it
     rather than the other way round. The box does not run past the text and the text does not run
     past the box: the container is sized so that a card's content box IS the measure, so they
     agree by construction and there is no gutter to argue about.
       container content 730 - card padding 56 = 674px = 75 characters at 16px.
     The cap stays as a cap for anything that ever sits in a wider box (admin's main.wide). Change
     this and --ev-container together, or they stop agreeing. */
  --ev-measure: 75ch;
  /* The reading column. Everything inside it is full width; the block itself is centred on the
     page. Checked against the two things that need width, not just text: the six-step stepper
     (app.css measured it fitting at a 720 container) and screen 7's six-column ruler (674 / 6 =
     112px a column, against ~85px for the longest label, "NOT EXPOSED"). */
  --ev-container: 730px;
  --ev-radius-card: 20px;
  --ev-radius-tile: 26%; /* of tile size */
  --ev-radius-pill: 999px;

  --ev-shadow-card:       0 18px 44px rgba(122, 62, 43, 0.12);
  --ev-shadow-sheet:      0 24px 60px rgba(122, 62, 43, 0.14);
  --ev-shadow-btn-hover:  0 12px 26px rgba(122, 62, 43, 0.28);
  --ev-shadow-btn-active: 0 2px 8px rgba(122, 62, 43, 0.22);

  /* Motion — one easing, everywhere. */
  --ev-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ev-dur-micro: 250ms;
  --ev-dur-press: 90ms;
  --ev-dur-entrance: 900ms;
  --ev-dur-entrance-fast: 600ms;
  --ev-stagger: 90ms;
}

/* Roles the site has no token for, because they are app furniture rather than marketing surface.
   Named for what they DO. Values are existing palette tokens — nothing new is invented here. */
:root {
  --ev-surface-card:      var(--ev-cream);
  --ev-surface-settled:   #FFFDFA;               /* cream, one step warmer: a card already judged */
  --ev-surface-page:      var(--ev-cream);
  --ev-on-accent:         #fff;                  /* the only pure white in the system */
  /* The primary button. Named for the role, not the colour: terracotta is the hero accent and
     stays so, but white on it is 3.74:1 and this is text. Rust carries cream at 7.96:1. The
     accent still MARKS the button's company — the active step, the progress bar — where nothing
     is read off it. One definition, so the two CTA rules cannot drift apart again. */
  --ev-cta-fill:          var(--ev-rust);
  --ev-on-cta:            var(--ev-cream);

  /* The stepper. The active step is marked with the accent and reads in deep text, not reversed
     out of a filled chip: white on terracotta measures 3.74:1 and cream on terracotta 3.62:1, both
     short of AA's 4.5:1 for text. The accent still identifies the step — as the dot fill and the
     border — while the label itself sits at 7.96:1. A page-level rust fill was the other option
     and it turns a progress indicator into a second header. */
  --ev-step-active-fg:    var(--ev-rust);
  --ev-step-active-mark:  var(--ev-accent);
  --ev-step-active-tint:  rgba(200, 106, 74, 0.12);
  --ev-step-done-fg:      var(--ev-teal);
  --ev-step-todo-fg:      var(--ev-text-muted);

  --ev-focus-ring:        var(--ev-accent);
  --ev-tint-sand:         rgba(231, 216, 197, 0.4);   /* the gap panel, the answers panel */
  --ev-scrim:             rgba(253, 251, 247, 0.93);  /* the waiting overlay */

  /* The alternative roles screen (design handoff, Sept 2026). Its cards sit on the page ground
     rather than on sand, so the light card is pure white — the only place in the app that is. */
  --ev-roles-card-surface:   #FFFFFF;
  --ev-roles-dot-empty:      rgba(122, 62, 43, 0.18);  /* an unfilled distance dot */
  /* The "further afield" row. Sand, not rust: a full-width rust row reads as the recommended
     one, and further afield is the opposite of recommended.

     28%, where the handoff comp draws 45%. The handoff's own rule is that olive on cream is
     4.96:1 and readable — true on cream, but sand at 45% takes the same olive to 4.34:1 and the
     row's blurb is set in it. 28% holds olive at 4.57:1 and rust at 7.33:1. The row still reads
     as sand; it just does not cost the text its contrast. */
  /* Screen 7's ruler and its second task group. Named for the role, and both are contrast
     decisions rather than taste: the strip exists because the block's ground is sand and sand on
     sand is 1.35; the teal tint is 5% because at 7% the teal heading on it falls to 4.57 and the
     AA headroom is gone. The marked step carries no mark of its own: its label is the system's
     rust pill, the same part as the story card's verdict pill. An earlier draft underlined that
     pill in mustard — the system has no such part. Mustard fills a shape on rust or is text on
     rust; it is never a rule. */
  --ev-ruler-seg:            var(--ev-sand);
  --ev-ruler-seg-edge:       rgba(122, 62, 43, 0.14);
  --ev-ruler-seg-here:       var(--ev-rust);
  --ev-tasks-low-panel:      rgba(61, 109, 110, 0.05);
  --ev-tasks-low-ink:        var(--ev-teal);
  --ev-roles-row-far:        rgba(231, 216, 197, 0.28);
  --ev-rule-on-rust-soft:    rgba(231, 216, 197, 0.25); /* the signal band's hairlines, on rust */
  --ev-rule-on-rust-chip:    rgba(231, 216, 197, 0.45); /* a dashed "you'd add" chip, on rust */
  --ev-shadow-roles-card:      0 18px 44px rgba(122, 62, 43, 0.08);
  --ev-shadow-roles-card-rust: 0 18px 44px rgba(122, 62, 43, 0.18);
  --ev-shadow-roles-pop:       0 18px 44px rgba(122, 62, 43, 0.14);
  --ev-shadow-btn-hover-rust:  0 12px 26px rgba(20, 10, 6, 0.30);
}