/*
 * Irtiqa design tokens
 * ---------------------------------------------------------------------------
 * Derived from the approved Claude Design reference. Every colour, radius and
 * type step in the application resolves to a variable declared here — nothing
 * downstream hard-codes a hex value, so a palette change is a single-file edit.
 *
 * Palette reading: deep teal ground, warm paper surfaces, ochre for action.
 * The ochre is the only *saturated* colour in the system, which is what makes
 * a primary button unmistakable on a dense admin screen. The navigation tones
 * below are the one qualification of that rule, and they are deliberately kept
 * beneath it: every one is low-chroma, so a menu of coloured icons still loses
 * to a single ochre button. Colour that competes with the action is colour
 * that costs you the action.
 */

:root {
  /* --- Ground and ink ---------------------------------------------------- */
  --ink:              #101c1b;   /* Body text, table values */
  --ink-deep:         #12100c;   /* Text on ochre */
  --ground:           #0d2f30;   /* Sidebar, sign-in, exam chrome */

  /* --- Brand ------------------------------------------------------------- */
  --teal:             #17605f;   /* Links, secondary actions, active nav */
  --teal-hover:       #0f4a49;
  --ochre:            #cf7d2a;   /* Primary action, focus, live indicators */
  --ochre-hover:      #a05c14;
  --ochre-deep:       #7a430c;
  --ochre-soft:       #e8b57a;
  --ochre-tint:       #fdeedd;   /* Ochre badge and highlight backgrounds */

  /* --- Surfaces ---------------------------------------------------------- */
  --paper:            #faf8f4;   /* App background */
  --paper-raised:     #fbfaf7;
  --paper-sunken:     #f4f2ed;   /* Table headers, inset panels */
  --paper-muted:      #f0ede6;
  --card:             #ffffff;

  /* --- Sage: informational surfaces -------------------------------------- */
  --sage:             #eef2ee;
  --sage-deep:        #e6efe8;
  --sage-line:        #dfe6df;

  /* --- Status ------------------------------------------------------------ */
  /* --- Navigation tones ---------------------------------------------------
   *
   * DOCUMENTED DECISION — a tone per area, not a colour per row
   *
   * Twenty-five hues is not a palette, it is confetti: nothing is learnable
   * because nothing repeats. These are seven, one per part of the platform, so
   * the colour says which area a row belongs to — People, Structure, Teaching,
   * Examinations, Results, Notices, System. After a week somebody navigates by
   * the family without reading, which is the only thing colour in a menu can
   * usefully buy.
   *
   * Muted on purpose. Each is roughly the hue of its family at low chroma, so
   * they read as a set that belongs to this deep-teal shell rather than as a
   * palette borrowed from somewhere brighter — and so ochre keeps its
   * monopoly on being the loudest thing on the page.
   *
   * Two of each: the sidebar sits on a near-black ground and the hub tiles sit
   * on paper, and a colour legible on one is invisible on the other.
   */
  /* On the dark sidebar. */
  --tone-people:      #8fb3c4;   /* accounts, enrolment, assignment */
  --tone-structure:   #b9a97e;   /* sessions, classes, subjects, batches */
  --tone-teaching:    #8fbfa4;   /* material, calendar, attendance */
  --tone-exams:       #d0a36a;   /* question bank, papers, marking */
  --tone-results:     #b494bf;   /* reports, results, progress */
  --tone-notices:     #d59a95;   /* the board */
  --tone-system:      #9aa7a4;   /* settings, audit trail, profile */

  /* On paper, for the hub tiles. Darker rather than the same value: a tone
     that reads as a tint on near-black reads as a smudge on cream. */
  --tone-people-ink:    #3d6b80;
  --tone-structure-ink: #7a6a3a;
  --tone-teaching-ink:  #2f7a56;
  --tone-exams-ink:     #96601c;
  --tone-results-ink:   #6c4a7a;
  --tone-notices-ink:   #97463f;
  --tone-system-ink:    #4a5754;

  --danger:           #b1471f;
  --danger-tint:      #fbeae3;
  --success:          #17605f;
  --success-tint:     #e6efe8;
  --warning:          #a05c14;
  --warning-tint:     #fdeedd;
  --info:             #17605f;
  --info-tint:        #eef2ee;

  /* --- Text ------------------------------------------------------------- */
  --text:             var(--ink);
  --text-muted:       rgba(16, 28, 27, 0.62);
  --text-subtle:      rgba(16, 28, 27, 0.45);
  --text-inverse:     #eef2ee;
  --text-inverse-dim: rgba(238, 242, 238, 0.62);

  /* --- Lines ------------------------------------------------------------- */
  --line:             rgba(16, 28, 27, 0.09);   /* Default hairline */
  --line-strong:      rgba(16, 28, 27, 0.13);   /* Inputs, emphasised edges */
  --line-inverse:     rgba(255, 255, 255, 0.22);

  /* --- Elevation --------------------------------------------------------- *
   * One shadow, used sparingly. The reference design separates surfaces with
   * hairlines rather than stacked shadows; more depth levels would read as a
   * different product.                                                       */
  --shadow:           0 2px 10px rgba(16, 28, 27, 0.07);
  --shadow-lifted:    0 8px 28px rgba(16, 28, 27, 0.14);
  --shadow-overlay:   0 24px 64px rgba(13, 47, 48, 0.28);

  /* --- Radii ------------------------------------------------------------- */
  --r-xs:  3px;    /* Chips, pills inside table cells */
  --r-sm:  5px;    /* Small badges */
  --r-md:  8px;    /* Buttons, inputs — the workhorse */
  --r-lg:  11px;   /* Cards, panels */
  --r-xl:  14px;   /* Modals, hero blocks */
  --r-pill: 999px;

  /* --- Direction --------------------------------------------------------- *
   * Logical properties handle the box model and positioning on their own, so
   * one stylesheet serves both directions. A transform is the exception: it is
   * geometry and knows nothing about writing direction, so translateX(-100%)
   * hides the drawer off the left edge whichever way the page reads.
   * Multiplying by this flips those, and only those.                          */
  --flip: 1;

  /* --- Type -------------------------------------------------------------- *
   * Instrument Sans for interface and data, Instrument Serif for display
   * numerals and page titles. The serif carries the editorial character; it
   * is never used below 20px, where it stops being legible at a glance.      */
  /* The script faces are listed after Instrument Sans rather than instead of
     it. Instrument Sans has no Bengali or Arabic glyphs, so the browser falls
     through to the next family for exactly the characters it cannot draw —
     which keeps Latin text (enrolment numbers, marks, codes, which stay
     Western in every locale) in the brand face on every page, while Bangla and
     Arabic text renders in a face designed for it. Only the family the page's
     locale needs is actually downloaded; see layouts/base.php. */
  --font-sans:  'Instrument Sans', 'Noto Sans Bengali', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Instrument Serif is Latin-only and is used for display numerals and page
     titles. A Bangla or Arabic title has no serif counterpart here, so it
     falls through to the script face rather than to a mismatched system
     serif. */
  --font-serif: 'Instrument Serif', 'Noto Sans Bengali', 'Noto Sans Arabic', Georgia, 'Times New Roman', serif;
  /* Headings — the words a page is titled with.
   *
   * Its own token rather than pointing the heading rules straight at
   * --font-sans, because this is the one line to change to move the interface
   * back to a display serif, or on to a brand face when one is licensed. The
   * fourteen rules that render a heading should not each hold an opinion about
   * which family that is.
   *
   * DOCUMENTED DECISION — words in sans, figures in serif
   *
   * Headings were set in Instrument Serif, which read as a different product
   * from the interface around it: a sidebar, a table and a button in a
   * grotesque, with the title above them in a high-contrast display serif. At
   * 30px the mismatch is the first thing on the page.
   *
   * Figures keep the serif — .numeral, .metric__value and the exam paper
   * counter. A tabular serif numeral is doing a different job from a title: it
   * is the thing being read on a dashboard or a mark sheet, it wants the
   * character, and it is not sitting beside body copy pretending to be part of
   * the same sentence.
   *
   * Sans headings need more weight than serif ones did. A display serif holds
   * a line at 400; the same size in Instrument Sans at 400 reads as body copy
   * that happens to be large, so the heading rules carry --w-semibold.
   */
  --font-display: var(--font-sans);

  --font-mono:  ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --t-micro:   10px;   /* Uppercase eyebrow labels */
  --t-xs:      11px;
  --t-sm:      12px;
  --t-base:    14px;   /* Interface default */
  --t-md:      16px;
  --t-lg:      19px;
  --t-xl:      22px;
  --t-2xl:     26px;
  --t-3xl:     32px;
  --t-display: 38px;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.55;

  /* Wide tracking on 10px uppercase labels — the reference design's most
     recognisable typographic move. */
  --track-label: 0.14em;
  --track-tight: -0.01em;

  /* --- Spacing: 4px base ------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* --- Layout ------------------------------------------------------------ */
  --sidebar-w:         236px;
  --sidebar-collapsed: 64px;
  --header-h:          60px;
  --content-max:       1440px;

  /* --- Motion ------------------------------------------------------------ *
   * Short and unfussy. Interface feedback should read as instant; anything
   * over ~200ms starts to feel like waiting.                                 */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    120ms;
  --t-base-ms: 180ms;
  --t-slow:    280ms;

  /* --- Stacking ---------------------------------------------------------- */
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base-ms: 0ms;
    --t-slow: 0ms;
  }
}

/* Arabic. Set on <html> by the base layout from the reader's locale. */
[dir="rtl"] {
  --flip: -1;
}