/* ============================================================================
   NexaCreator — design tokens
   Direction: "Rubric".

   Grounded in the subject: Ethiopian manuscript practice marks what matters in
   red ink against black, and that tradition IS the Ethiopic script this product
   already renders. So the script carries the identity, and red ink is reserved
   for meaning (provisional, shortfall, attention) rather than decoration.

   Deliberately avoided, because each is a documented tell of generated design:
     - warm cream ground + high-contrast serif + terracotta/clay accent
     - broadsheet: hairline rules, zero radius, dense newspaper columns
     - tracked-out ALL-CAPS eyebrows above headings
     - middle-dot meta strings, monospace faces for small data labels
     - a trailing arrow on every button
     - uniform bubbly radius, one soft grey shadow under everything
   ========================================================================== */

@import url("./fonts/fonts.css");

:root {
  /* --- Ink and ground -----------------------------------------------------
     A cool pale sage ground, not cream. A green-black ink, not tinted #0B0B0B. */
  --ink:        #121a17;
  --ink-2:      #2c3833;
  --muted:      #5c6660;
  --ground:     #e9ebe4;
  --panel:      #f7f8f4;
  --panel-2:    #eef0e9;
  --rule:       #c3c8bc;
  --rule-soft:  #d8dcd1;
  /* Placeholder fill for loading skeletons. Must be visibly darker than both
     --ground and --panel, or the loading state reads as a broken empty page. */
  --skeleton:   #c9cec2;

  /* --- Rubric: the single accent. Meaning-bearing, never decorative. -------
     Used for: provisional figures, the visible-value shortfall, attention.
     Never used for: brand flourishes, card edges, decorative numbering. */
  --rubric:      #9e2b25;
  --rubric-tint: #f4e6e2;

  /* --- Settled: confirmed, computed, safe. ------------------------------- */
  --settled:      #2f5d3f;
  --settled-tint: #e4ece3;

  /* --- Type -------------------------------------------------------------
     Three faces, and only because Amharic is a script requirement, not a voice.
     Ethiopic is a coverage necessity: no Latin UI face contains U+1200-1399. */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-ui:      'Archivo', system-ui, sans-serif;
  --font-am:      'Noto Serif Ethiopic', 'Archivo', serif;

  /* Scale. Body never drops below 16px; small steps are labels only. */
  --t-hero:  clamp(2.75rem, 6.5vw, 5.25rem);
  --t-xl:    1.75rem;
  --t-lg:    1.25rem;
  --t-body:  1rem;
  --t-sm:    0.875rem;
  --t-xs:    0.8125rem;

  --lh-tight: 1.08;
  --lh-body:  1.55;

  /* --- Space. A 4px base, geometric after that. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Small, consistent radius. Not a uniform large one. */
  --r: 3px;

  /* One rule weight. Structure comes from rules, not from shadows. */
  --hair: 1px solid var(--rule);

  --measure: 68ch;
  --tap: 44px;      /* minimum touch target */
}

/* ---------------------------------------------------------------------------
   Amharic is primary. Where an Amharic string and a Latin one sit together,
   the Amharic is set first and slightly larger, because it is the reading the
   person legally responsible for the number will actually use.
   ------------------------------------------------------------------------- */
.am { font-family: var(--font-am); font-size: 1.06em; line-height: 1.5; }

/* Tabular figures wherever money is set, so columns align on the digit. */
.money {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-ui);
  letter-spacing: -0.01em;
}
.money--display {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 400;
}