/* ==========================================================================
   Miftah Islamiyat — base  (visual redesign, Stage 2)
   Design tokens, reset, typography, accessibility primitives.

   Design intent
   -------------
   Calm, warm and academically serious. The reference points are a good
   university press textbook and a well-set reference work, not a consumer app.
   Long passages of reading must be comfortable, Arabic must sit with dignity
   beside English, and the whole thing must survive being projected onto a
   classroom wall.

   Changes in this revision
   -----------------------
   - Warmer paper and a softer, less clinical ink.
   - A proper modular type scale instead of ad-hoc sizes.
   - Deeper, more distinctive accent colours with tested contrast.
   - A consistent 8px spacing rhythm.
   - Subtle depth: layered surfaces rather than heavy borders.
   ========================================================================== */

:root {

  /* --- Surfaces -----------------------------------------------------------
     Warm parchment neutrals. Paper is the page, raised is a card, sunk is a
     well, deep is a band that needs to separate from a well next to it. */
  --paper:          #fcfaf5;
  --paper-raised:   #ffffff;
  --paper-sunk:     #f5f0e5;
  --paper-deep:     #eae1cf;

  /* --- Ink ----------------------------------------------------------------
     Warm-shifted rather than blue-grey, so text sits on parchment instead of
     floating above it. Every value is at least 4.5:1 on --paper, so metadata
     and captions stay readable rather than being decoratively grey. */
  --ink:            #221f2e;   /* body text        15.6:1 */
  --ink-strong:     #16131f;   /* headings         17.6:1 */
  --ink-soft:       #4c4860;   /* secondary text    8.0:1 */
  --ink-faint:      #625d76;   /* metadata          5.8:1 */

  /* --- Rules -------------------------------------------------------------- */
  --rule:           #e6ddca;
  --rule-strong:    #cbbfa3;

  /* --- Accents ------------------------------------------------------------
     Lapis and saffron: the blue and gold of a manuscript page. Lapis is the
     primary voice, saffron marks evidence and the things worth quoting, clay
     marks warnings and misconceptions, plum marks structural and syllabus
     information, verdigris marks success and completion.

     The token names below are historical. They were named after the previous
     green-led palette and are referenced from every other stylesheet, so the
     values changed and the names did not. --pine is the primary, --gold is
     the accent, --indigo is the structural colour, --sage is success. */
  --pine:           #2f3f84;   /* lapis, primary    8.9:1 on paper */
  --pine-deep:      #1e2a5e;
  --pine-tint:      #eaedf8;
  --pine-edge:      #bac3e3;

  --gold:           #92590a;   /* saffron           5.6:1 on paper */
  --gold-tint:      #fbf1da;
  --gold-edge:      #e5c68d;

  --clay:           #96382f;
  --clay-tint:      #fbeeeb;
  --clay-edge:      #eec6bf;

  --indigo:         #6a3573;   /* plum, structural  7.3:1 on paper */
  --indigo-tint:    #f4ecf6;
  --indigo-edge:    #d8c1dd;

  --sage:           #0d6459;   /* verdigris         5.9:1 on paper */
  --sage-tint:      #e2f1ee;
  --sage-edge:      #a9d5cc;

  /* --- Typography ---------------------------------------------------------
     A serif for display and a sans for everything operational. The reference
     is a university press textbook, where the running heads and captions are
     mechanical and the headings are not. The serif stack is system-resident
     on every target platform, so there is no webfont request, no flash of
     unstyled text and nothing to break when the site is used offline. */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  'Book Antiqua', 'URW Palladio L', Georgia, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-ui:   ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-ar:   'Scheherazade New', 'Amiri', 'Noto Naskh Arabic',
               'Traditional Arabic', 'Geeza Pro', 'Segoe UI', serif;

  /* A 1.25 modular scale from a 17px base. Wider than the old 1.2, so the
     jump from a heading to its body copy is a step rather than a nudge. */
  --t--1:  0.82rem;
  --t-0:   1.0625rem;
  --t-1:   1.2rem;
  --t-2:   1.45rem;
  --t-3:   1.8rem;
  --t-4:   2.3rem;
  --t-5:   2.9rem;
  --t-6:   3.7rem;

  --size-base: var(--t-0);
  --lh-base:   1.68;
  --lh-tight:  1.28;
  --measure:   66ch;

  /* --- Space: an 8px rhythm ----------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;    --s7: 3rem;     --s8: 4.5rem;
  --s9: 6rem;

  /* --- Shape and depth ----------------------------------------------------- */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  14px;
  --radius-xl:  20px;

  --shadow-sm:  0 1px 2px rgba(27,39,51,.05);
  --shadow:     0 1px 3px rgba(27,39,51,.06), 0 6px 16px -6px rgba(27,39,51,.10);
  --shadow-lg:  0 2px 6px rgba(27,39,51,.07), 0 18px 40px -14px rgba(27,39,51,.18);

  --focus-ring: 3px solid var(--indigo);
  --ease:       cubic-bezier(.4, 0, .2, 1);

  /* --- Sticky header allowance ---------------------------------------------
     The header is sticky, so every in-page anchor must clear it or the target
     heading lands underneath. One token, used by scroll-padding, scroll-margin
     and anything that sticks below the header. */
  --header-h: 5.6rem;
}

/* --- User display preferences, set on <html> by a11y.js ------------------- */
html[data-text-size="large"]      { --size-base: var(--t-1); }
html[data-text-size="x-large"]    { --size-base: var(--t-2); }
html[data-line-spacing="loose"]   { --lh-base: 1.95; }
html[data-line-spacing="x-loose"] { --lh-base: 2.25; }

html[data-contrast="high"] {
  --paper: #fff; --paper-raised: #fff; --paper-sunk: #f0f0f0; --paper-deep: #e4e4e4;
  --ink: #000; --ink-strong: #000; --ink-soft: #1c1c1c; --ink-faint: #303030;
  --rule: #767676; --rule-strong: #2b2b2b;
  --pine: #16205a; --gold: #5c3703; --clay: #6f2721; --indigo: #471a4e; --sage: #06423a;
  --pine-deep: #0d1440; --gold-tint: #fff; --pine-tint: #fff; --indigo-tint: #fff;
  --pine-edge: #16205a; --gold-edge: #5c3703; --clay-edge: #6f2721;
  --indigo-edge: #471a4e; --sage-edge: #06423a;
  --shadow: none; --shadow-sm: none; --shadow-lg: none;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--lh-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/* Display headings are set in the serif; h4 and h5 are operational labels and
   stay in the sans, which is what keeps the serif from feeling decorative. */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h4, h5, h6 {
  font-family: var(--font-ui);
  color: var(--ink-strong);
  line-height: var(--lh-tight);
  font-weight: 650;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}

h1 { font-size: clamp(var(--t-4), 1.4rem + 2.6vw, var(--t-6)); letter-spacing: -0.021em; }
h2 { font-size: clamp(var(--t-3), 1.2rem + 1.2vw, var(--t-4)); letter-spacing: -0.016em; }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); letter-spacing: -0.006em; }
h5 {
  font-size: var(--t--1); font-weight: 700; letter-spacing: .085em;
  text-transform: uppercase; color: var(--ink-faint);
}

p, ul, ol, dl, table, figure, blockquote, pre { margin: 0 0 var(--s4); }
p, li { max-width: var(--measure); }

h2 + p, h3 + p, h2 + ul, h3 + ul { margin-top: 0; }
* + h2 { margin-top: var(--s7); }
* + h3 { margin-top: var(--s5); }

a {
  color: var(--pine-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .15s var(--ease);
}
a:hover { color: var(--ink-strong); text-decoration-thickness: 2px; }

strong, b { font-weight: 700; color: var(--ink-strong); }
em, i { font-style: italic; }
small { font-size: var(--t--1); }

ul, ol { padding-left: var(--s5); }
li + li { margin-top: var(--s2); }
li::marker { color: var(--ink-faint); }

hr {
  border: 0; height: 1px; margin: var(--s7) 0;
  background: linear-gradient(90deg, var(--rule-strong), var(--rule) 60%, transparent);
}

img, svg, video { max-width: 100%; height: auto; }

blockquote {
  border-left: 3px solid var(--rule-strong);
  padding-left: var(--s4);
  color: var(--ink-soft);
  font-style: italic;
}

code, kbd, samp {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--paper-sunk);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Focus and keyboard
   ========================================================================== */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--s4); top: -6rem; z-index: 200;
  background: var(--ink-strong); color: #fff;
  padding: var(--s3) var(--s5);
  border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 650;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--s4); color: #fff; }

main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
label { font-family: var(--font-ui); }

input[type="checkbox"], input[type="radio"] {
  width: 1.15rem; height: 1.15rem; flex: none;
  accent-color: var(--pine);
  margin-right: var(--s2);
  cursor: pointer;
}

textarea,
input[type="text"], input[type="search"], input[type="file"],
select {
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.6;
  width: 100%;
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea:focus, input:focus, select:focus {
  border-color: var(--pine);
  box-shadow: 0 0 0 3px var(--pine-tint);
}
textarea { resize: vertical; min-height: 6rem; }
select { font-family: var(--font-ui); font-size: var(--t--1); cursor: pointer; }

/* ==========================================================================
   Tables
   ========================================================================== */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
caption {
  text-align: left;
  font-family: var(--font-ui); font-size: var(--t--1); font-weight: 650;
  color: var(--ink-faint);
  padding-bottom: var(--s2);
  caption-side: top;
}
th, td {
  text-align: left; vertical-align: top;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
}
thead th {
  font-family: var(--font-ui); font-size: var(--t--1); font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule-strong);
}
tbody th { font-family: var(--font-ui); font-weight: 650; color: var(--ink-strong); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper-sunk); }

.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--s5);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 34rem; }

/* ==========================================================================
   Small utilities
   ========================================================================== */
.lede {
  font-size: clamp(var(--t-1), 1rem + .35vw, var(--t-2));
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
}
.muted { color: var(--ink-faint); }
.stack > * + * { margin-top: var(--s4); }
.center { text-align: center; }