/* Hallmark · design-system tokens · theme: custom · vibe: "ملعب صباحي، ورق دافئ، رياضي مبهج، سعودي"
 * paper: oklch(97% 0.010 150) · accent: oklch(60% 0.17 50) · display: Thmanyah Serif Display · body: Thmanyah Sans
 * axes: light / roman-serif / warm · variants: day only (night retired 2026-09-16) · studied: no · context: explicit
 * Refresh 12-1 (2026-09-27): warm pastel surfaces (cream / peach / sand), lifted borderless cards, pill buttons,
 * one accent-filled primary, softer inputs, larger display scale. No dark band anywhere.
 * Source of truth for every colour, font, size, space, easing and radius. style.css consumes these only.
 * Tenant colour: base.html injects --hue-tint / --hue-accent / --color-accent* / --color-focus from app/core/colors.py.
 */
:root {
  --hue-tint: 150;
  --hue-accent: 50;
  --color-paper:       oklch(97% 0.010 var(--hue-tint));
  --color-paper-2:     oklch(94% 0.012 var(--hue-tint));
  --color-paper-3:     oklch(90% 0.014 var(--hue-tint));
  --color-ink:         oklch(20% 0.012 var(--hue-tint));
  --color-ink-2:       oklch(36% 0.012 var(--hue-tint));
  --color-muted:       oklch(48% 0.012 var(--hue-tint));
  --color-rule:        oklch(80% 0.014 var(--hue-tint));
  --color-rule-2:      oklch(86% 0.012 var(--hue-tint));
  /* lifted surfaces: a card is lighter than the paper canvas, never shadowed */
  --color-card:        oklch(99.3% 0.004 var(--hue-tint));
  /* warm pastel rooms for feature and stat cards (rotate in this order) */
  --color-cream:       oklch(95.5% 0.030 95);
  --color-peach:       oklch(94.5% 0.035 45);
  --color-sand:        oklch(94.5% 0.020 70);
  --color-accent:      oklch(60% 0.17 var(--hue-accent));
  --color-accent-fill: oklch(75% 0.16 var(--hue-accent));
  --color-accent-ink:  var(--color-ink);
  --color-focus:       oklch(58% 0.21 var(--hue-accent));
  --color-ok:          oklch(45% 0.13 150);
  --color-ok-soft:     oklch(93% 0.04 150);
  --color-warn:        oklch(52% 0.14 75);
  --color-warn-soft:   oklch(94% 0.05 80);
  --color-danger:      oklch(50% 0.19 25);
  --color-danger-soft: oklch(94% 0.04 25);
  --color-whatsapp:    oklch(72% 0.19 152);   /* brand colour of the WhatsApp button; text on it is ink */

  --font-display: "Thmanyah Serif Display", "Thmanyah Sans", serif;
  --font-body:    "Thmanyah Sans", "Segoe UI", Tahoma, sans-serif;

  --text-xs: .8rem; --text-sm: .9rem; --text-base: 1rem; --text-md: 1.25rem;
  --text-lg: 1.5625rem; --text-xl: 1.9531rem; --text-2xl: 2.4414rem; --text-3xl: 3.0518rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-xl: clamp(3.25rem, 7vw + 1rem, 7rem);
  --text-figure:  clamp(5rem, 15vw, 9rem);

  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 320ms;

  --rule-hair: 1px; --rule-strong: 2px;
  --radius-input: 12px; --radius-button: 999px; --radius-card: 24px; --radius-card-sm: 16px; --radius-pill: 999px;
  --section-gap: var(--space-3xl);
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 62ch;
  --banner-h: 44px; --bar-h: 64px;
  --z-sticky: 200; --z-nav: 300; --z-bar: 400; --z-skip: 600;
}