/* 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 · night · studied: no · context: explicit
 * 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));
  --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.25rem, 4vw + 1rem, 4.25rem);
  --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: 6px; --radius-button: 8px; --radius-card: 12px; --radius-pill: 999px;
  --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;
}
[data-variant="night"] {
  --color-paper:       oklch(17% 0.014 var(--hue-tint));
  --color-paper-2:     oklch(21% 0.014 var(--hue-tint));
  --color-paper-3:     oklch(26% 0.014 var(--hue-tint));
  --color-ink:         oklch(94% 0.008 var(--hue-tint));
  --color-ink-2:       oklch(82% 0.010 var(--hue-tint));
  --color-muted:       oklch(70% 0.010 var(--hue-tint));
  --color-rule:        oklch(32% 0.012 var(--hue-tint));
  --color-rule-2:      oklch(26% 0.012 var(--hue-tint));
  --color-accent:      oklch(74% 0.15 var(--hue-accent));
  --color-accent-fill: oklch(74% 0.15 var(--hue-accent));
  --color-accent-ink:  oklch(17% 0.014 var(--hue-tint));
  --color-focus:       oklch(78% 0.20 var(--hue-accent));
  --color-ok:          oklch(78% 0.12 150);
  --color-ok-soft:     oklch(26% 0.04 150);
  --color-warn:        oklch(80% 0.12 80);
  --color-warn-soft:   oklch(27% 0.05 80);
  --color-danger:      oklch(76% 0.15 25);
  --color-danger-soft: oklch(27% 0.05 25);
}