/* ═══════════════════════════════════════════════════════════════════
   ኤላም — 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. */
  --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);

  /* ── 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);
}

[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); }