/* Hallmark · genre: editorial · macrostructure: Photographic (H6 fold) into Long Document body
 * theme: custom (vibe: "limestone, glass, calm institution, research" · paper oklch(97.2% 0.008 85) · accent oklch(47% 0.085 195) glass-teal · one family: IBM Plex Sans / IBM Plex Sans Arabic)
 * axes: light / grotesque / cool · enrichment: supplied photograph · nav: N9 edge-aligned (solid on scroll) · footer: Ft1 mast-headed
 * Tokens only. Every colour and font on the page references a name below.
 */
:root {
  /* colour */
  --color-paper:          oklch(97.2% 0.008 85);
  --color-paper-2:        oklch(94.2% 0.012 85);
  --color-paper-3:        oklch(95.2% 0.016 195);   /* faint teal wash (tracks) */
  --color-lift:           oklch(98.8% 0.005 85);    /* session rows, lifted off paper-2 */
  --color-rule:           oklch(86% 0.012 85);
  --color-neutral:        oklch(50% 0.018 222);
  --color-muted:          oklch(38% 0.022 222);
  --color-ink:            oklch(21% 0.028 225);
  --color-band:           oklch(21% 0.028 225);
  --color-band-2:         oklch(17.5% 0.026 225);
  --color-rule-on-dark:   oklch(40% 0.03 222);
  --color-on-dark:        oklch(96.5% 0.008 85);
  --color-on-dark-muted:  oklch(82% 0.012 85);
  --color-accent:         oklch(47% 0.085 195);
  --color-accent-on-dark: oklch(82% 0.075 190);
  --color-focus:          var(--color-accent);
  --color-focus-on-dark:  var(--color-accent-on-dark);

  /* glass: frosted sheets where something sits behind them (alpha is a modifier) */
  --glass-light:      oklch(100% 0 0 / 0.72);           /* sheet on paper */
  --glass-light-edge: oklch(100% 0 0 / 0.9);         /* rim of the paper sheet */
  --glass-dark:       oklch(96.5% 0.008 85 / 0.10);     /* sheet on ink or photo */
  --glass-ink:        oklch(17% 0.03 225 / 0.55);      /* header glass over the photo: tinted so its text stays >= 4.5:1 on bright sky */
  --glass-dark-hover: oklch(96.5% 0.008 85 / 0.18);
  --glass-edge:       oklch(100% 0 0 / 0.28);
  --glass-edge-soft:  oklch(100% 0 0 / 0.14);
  --glass-edge-strong: oklch(100% 0 0 / 0.45);
  --shadow-rest: 0 1px 2px oklch(21% 0.028 225 / 0.06);
  --glass-solid-dark: oklch(30% 0.03 225 / 0.92);       /* fallback when backdrop-filter is unsupported */
  --shadow-lift: 0 1px 0 oklch(100% 0 0 / 0.6) inset, 0 10px 28px -12px oklch(21% 0.028 225 / 0.28);

  /* photo scrims (alpha is a modifier on the ink anchor) */
  --scrim-strong: oklch(15% 0.03 225 / 0.88);
  --scrim-text:   oklch(15% 0.03 225 / 0.78);   /* under hero text on a sharp photo with bright sky */
  --scrim-mid:    oklch(15% 0.03 225 / 0.55);
  --scrim-soft:   oklch(15% 0.03 225 / 0.28);
  --scrim-clear:  oklch(15% 0.03 225 / 0);

  /* type */
  /* one family: Plex Sans for Latin, Plex Sans Arabic (same design) for Arabic. Hierarchy by size and weight only (400/500/600). */
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic:  "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.1875rem;
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --text-3xl:  clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-slogan:  clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);  /* hero slogan: above every section title (text-3xl) at every width, below the h1 */
  --text-display: clamp(2.5rem, 1.55rem + 4.3vw, 5.25rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --leading-arabic: 1.8;

  /* space (4 pt) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --gutter: 1rem;
  --measure: 68ch;
  --container: 75rem;
  --header-h: 4rem;

  /* shape */
  --radius-sm: 2px;
  --radius-full: 9999px;
  --rule-hair: 1px;
  --rule-mark: 2px;

  /* motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 700ms;
}

@media (min-width: 720px) {
  :root { --gutter: 2.5rem; --header-h: 4.5rem; }
}

/* Dark scheme: same hues, lightness swapped. Hero and ink bands are already dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:   oklch(17% 0.02 225);
    --color-paper-2: oklch(20.5% 0.024 225);
    --color-paper-3: oklch(21.5% 0.03 200);
    --color-lift:    oklch(24.5% 0.026 225);
    --glass-light:   oklch(34% 0.03 225 / 0.55);
    --glass-light-edge: oklch(100% 0 0 / 0.12);
    --shadow-lift: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 10px 28px -12px oklch(0% 0 0 / 0.6);
    --shadow-rest: 0 1px 2px oklch(0% 0 0 / 0.25);
    --color-rule:    oklch(32% 0.022 222);
    --color-neutral: oklch(70% 0.015 222);
    --color-muted:   oklch(80% 0.012 85);
    --color-ink:     oklch(95% 0.008 85);
    --color-accent:  oklch(78% 0.08 190);
  }
}
:root[data-theme="dark"] {
  --color-paper:   oklch(17% 0.02 225);
  --color-paper-2: oklch(20.5% 0.024 225);
  --color-paper-3: oklch(21.5% 0.03 200);
  --color-lift:  oklch(24.5% 0.026 225);
  --glass-light:   oklch(34% 0.03 225 / 0.55);
  --glass-light-edge: oklch(100% 0 0 / 0.12);
  --shadow-lift: 0 1px 0 oklch(100% 0 0 / 0.06) inset, 0 10px 28px -12px oklch(0% 0 0 / 0.6);
  --shadow-rest: 0 1px 2px oklch(0% 0 0 / 0.25);
  --color-rule:    oklch(32% 0.022 222);
  --color-neutral: oklch(70% 0.015 222);
  --color-muted:   oklch(80% 0.012 85);
  --color-ink:     oklch(95% 0.008 85);
  --color-accent:  oklch(78% 0.08 190);
}