/* ═══════════════════════════════════════════════════════════════════
   ኤላም — design tokens

   Warm paper, ink, and one terracotta. The palette is taken from the
   approved Elam design set: a cream page (#f7f6f3) that reads like the
   paper a lesson is printed on, near-black ink rather than pure black,
   hairline warm-grey rules instead of boxes, and a single terracotta
   reserved for links, "you are here", and the small accents on dark.

   Colour never carries meaning on its own — mastery is dots plus a
   word, correctness is a tick plus a label — because this is used on
   modest phones in bright daylight, and because a fifth of the men in
   any congregation cannot separate the green from the gold.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────── */
  --app:       #f7f6f3;   /* the page */
  --card:      #ffffff;   /* anything raised off it */
  --rail:      #f2f0ec;   /* quiet fills: sunken rows, chips */
  --paper:     #eceae5;   /* the mat the app frame sits on */
  --cream:     #f7f6f3;
  --ink-block: #1c1a17;   /* dark bands and the CTA slab */
  --on-dark:   #ffffff;

  /* The practice screen is the same paper, just without the furniture. */
  --session-bg:        #f7f6f3;
  --session-chrome:    rgba(251,250,248,.9);
  --session-ink:       #1c1a17;
  --session-muted:     #6f6862;
  --session-line:      #e7e3dc;
  --session-card:      #ffffff;
  --session-card-line: #e7e3dc;
  --session-key:       #f2f0ec;
  --session-disabled:  #e9e6e0;

  /* ── Rules ────────────────────────────────────────────────────── */
  --line:      #e7e3dc;
  --line-soft: #efece7;
  --line-2:    #ded8cf;
  --line-3:    #d2ccc1;
  --sunk:      #e9e6e0;
  --hover:     #f2f0ec;

  /* ── Ink ──────────────────────────────────────────────────────── */
  --ink:       #1c1a17;
  --ink-2:     #3d3934;
  --ink-3:     #57514a;
  --ink-4:     #6f6862;
  /* The mock's muted greys were #9a9287 and #b8b1a7. Both are used for
     real words — unit counts, "no history", input placeholders — and at
     2.1:1 and 2.8:1 on cream neither is readable in daylight on a phone,
     which is the only place this app is used. Darkened just far enough
     to clear 3:1; the warm cast is kept exactly.

     3:1 is the ceiling of what these two are for. --ink-5 is 3.5:1 and
     --ink-6 is 3.07:1 on cream, so neither clears the 4.5:1 that text under
     18.66px needs.

     **--ink-6 is not an ink for words.** Six labels between 11px and 15px had
     drifted onto it and were moved to --ink-4 (5.07:1) on 2026-08-11; a
     test_app assertion now holds it there. What still wears it is what the
     ratio suits — an input placeholder, a border, and a disabled control,
     the last exempt from 1.4.3 by name.

     **--ink-5 keeps its 34 text uses, decided 2026-08-11.** All 34 sit under
     18.66px and none qualifies for the large-text exemption, so all 34 are
     under AA at 3.5:1. They were measured and left: it is the site's muted
     ink — .eyebrow alone is on every page — and clearing 4.5:1 on every
     surface it touches lands on #6f6862, which is --ink-4, collapsing a rung
     out of the ladder. Reopening this means changing the tone of every
     screen, not fixing a stray. Do not migrate them one at a time; that is
     the same decision taken by halves. */
  --ink-5:     #8a8279;
  --ink-6:     #948c81;

  /* ── Terracotta: links, active state, accents on dark ─────────── */
  --accent:      #b4402e;
  --accent-2:    #8f3122;
  --accent-bg:   #f6ece9;
  /* The fill for "this is the one I chose". --accent-bg is a *band*
     colour at 1.16:1 — fine behind a paragraph, useless as the only
     record of a decision when marking is withheld to the end of a
     session and a phone is the only thing showing it. */
  --pick-bg:     #f0d6ce;
  --accent-lt:   #f0b8ac;   /* on the dark blocks only */
  --accent-soft: #c9705f;

  /* ── Semantic ─────────────────────────────────────────────────── */
  --good:      #3f7355;
  --good-2:    #2f5b42;
  --good-bg:   #e9f1eb;
  --good-line: #cfe0d5;
  /* Marking fills, for the answer card itself. The -bg pair above are
     band colours at ~1.15:1 — right behind a paragraph of prose, wrong
     as the thing that tells a learner on a phone which row they got
     wrong. Only the graded cards use these. */
  --good-fill: #d7e8dd;

  --bad:       #b4402e;
  --bad-2:     #8f3122;
  --bad-bg:    #f9e8e4;
  --bad-line:  #ecccc4;
  --bad-fill:  #f6d8d1;
  --bad-soft:  #c9705f;

  --warn:      #8a621b;
  --warn-bg:   #faf1e0;
  --warn-line: #efe0c2;
  --warn-ink:  #6b4b12;
  --gold:      #b58330;

  /* ── Mastery ramp ─────────────────────────────────────────────────
     Two ramps, because the level is written as a word next to its dots
     and the word has to be readable on whichever surface it lands on.
     The mock's ramp was drawn for the dark band, where it is right; on
     cream, "Beginning" in #b58330 is 3.1:1 and "Mastered" in #5f9c78 is
     3.0:1 — a 12px label nobody can read. The paper ramp below is the
     same five hues taken down to 4.5:1 and up. */
  /* m0 and m1 are set against the *tinted* track cards as well as the
     page, and a tint costs about half a point of contrast — so these two
     are pitched for the worst surface they land on, not the best. */
  --m0: #6b6459;
  --m1: #805a17;
  --m2: #6b5f1c;
  --m3: #3f7355;
  --m4: #2f5b42;

  /* …and the mock's own values, for the ink blocks they were drawn on. */
  --m0-dark: #b8b1a7;
  --m1-dark: #b58330;
  --m2-dark: #94822a;
  --m3-dark: #5f9c78;
  --m4-dark: #8dc0a2;

  /* ── Subject identity ─────────────────────────────────────────────
     One family, four temperatures, all of them washes.

     A tint here is a *surface*: the track card, the band at the head of
     a course, the hovered row. The type that sits on it is the same near
     black ink as everywhere else, because a track card is something you
     read, not a swatch. So the tint has to stay pale — a saturated fill
     with dark Ethiopic on it is unreadable, and white Ethiopic on it
     turns four calm siblings into four loud tiles.

     --t-*-ink is the deep partner: the emblem watermark, the eyebrow,
     the rule down the side of a note. It never sits behind text. */
  --t-books:  #f4e6e1;  --t-books-ink: #8f3122;
  --t-geez:   #e8efe8;  --t-geez-ink:  #3a5c44;
  --t-zema:   #f8efdc;  --t-zema-ink:  #7a5a1e;
  --t-hayma:  #e8ebf1;  --t-hayma-ink: #3f4a5c;

  /* ── Matching pairs ───────────────────────────────────────────────
     Six washes for the six pairs a matching question may hold. They are
     the same warm family as the track tints, pitched a shade stronger
     because a pair has to be findable across a gap rather than merely
     tint a card. Each has an ink partner for the rule down its side and
     the number badge — never for text set on the wash itself.

     Colour is the second channel here, not the first: both halves of a
     pair also carry the same number, so a reader who cannot separate
     these six still has an unambiguous link. */
  --p1: #f0d3c8;  --p1-ink: #8f3122;
  --p2: #d3e4d7;  --p2-ink: #3a5c44;
  --p3: #d7deee;  --p3-ink: #3f4a5c;
  --p4: #f2e2b8;  --p4-ink: #7a5a1e;
  --p5: #e6d5ec;  --p5-ink: #5c3f5c;
  --p6: #c9e2e5;  --p6-ink: #2f5559;

  /* ── Type ─────────────────────────────────────────────────────── */
  --ui:      "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --et:      "Noto Serif Ethiopic", "Abyssinica SIL", "Nyala", Georgia, serif;

  --t-xs:   12.5px;
  --t-sm:   13.5px;
  --t-base: 15px;
  --t-lg:   17.5px;
  --t-xl:   22px;
  --t-2xl:  30px;
  --t-3xl:  38px;
  --t-4xl:  58px;

  /* ── Elevation: warm, wide, and barely there ──────────────────── */
  --sh-1: 0 1px 2px rgba(28,26,23,.05);
  --sh-2: 0 1px 2px rgba(28,26,23,.05), 0 16px 36px -26px rgba(28,26,23,.40);
  --sh-3: 0 2px 4px rgba(28,26,23,.05), 0 40px 70px -40px rgba(28,26,23,.55);
  --sh-lift: 0 10px 26px -18px rgba(28,26,23,.50);
  --sh-dark: 0 20px 44px -28px rgba(28,26,23,.90);
  --sh-dialog: 0 30px 70px -30px rgba(28,26,23,.6);

  /* ── Space: a 4pt scale, global since 2026-08-11 ───────────────
     /teacher and /admin each carried a private copy of exactly these
     numbers, which was survivable while nothing shared between them
     used the names. `.actions` in base.css does, and a token that
     resolves on two surfaces out of nine is worse than no token. The
     two local blocks are now redundant, not contradictory — identical
     values, declared later, same specificity. */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ── Radii: generous, and consistent per size of thing ────────── */
  --r-sm:  9px;
  --r:     11px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  --frame: 1180px;
  --frame-wide: 1440px;
  --ease: cubic-bezier(.22,.72,.28,1);
}

/* A ዘርፍ created in /teacher has no palette of its own, and an undefined
   --tint leaves the emblem watermark taking body ink on a band that was
   drawn expecting a soft one. The neutral pair is the floor; the named
   tracks below override it in source order, at equal specificity. */
[data-track] { --tint: var(--rail); --tint-ink: var(--ink-3); }
[data-track="metsahaft"] { --tint: var(--t-books); --tint-ink: var(--t-books-ink); }
[data-track="geez"]      { --tint: var(--t-geez);  --tint-ink: var(--t-geez-ink); }
[data-track="zema"]      { --tint: var(--t-zema);  --tint-ink: var(--t-zema-ink); }
[data-track="haymanot"]  { --tint: var(--t-hayma); --tint-ink: var(--t-hayma-ink); }
[data-track="bible-study"] { --tint: #eee9df; --tint-ink: #685433; }
[data-track="amharic"]     { --tint: #e5edef; --tint-ink: #315d64; }