/* Hallmark · macrostructure: Stat-Led · H4 hero knobs: number=computed, support=macros+meal-split
 * theme: custom · vibe: "measured, clean, Baghdad green" · paper: oklch(97.5% 0.008 150) · accent: oklch(54% 0.155 152)
 * display: Readex Pro · body: IBM Plex Sans Arabic · mono: IBM Plex Mono
 * axes: light / geometric-sans / chromatic-green ~152°
 * studied: no · context: inferred · pre-emit critique: P5 H5 E5 S5 R4 V5
 */

:root {
  /* ---- Colour · anchored on the calories.iq green (~152°) ---------------- */
  --color-paper:       oklch(97.5% 0.008 150);
  --color-paper-2:     oklch(94.5% 0.011 150);
  --color-paper-3:     oklch(90.5% 0.014 150);
  --color-ink:         oklch(22%   0.020 155);
  --color-ink-2:       oklch(38%   0.016 155);
  --color-muted:       oklch(52%   0.012 152);
  --color-rule:        oklch(87%   0.010 150);
  --color-rule-2:      oklch(92.5% 0.008 150);
  --color-accent:      oklch(54%   0.155 152);
  --color-accent-deep: oklch(45%   0.130 153);
  --color-accent-soft: oklch(93%   0.045 150);
  --color-accent-ink:  oklch(98.5% 0.006 150);
  --color-focus:       oklch(56%   0.200 150);
  --color-warn:        oklch(52%   0.130 62);
  --color-warn-soft:   oklch(95%   0.040 75);

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "Readex Pro", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-stat: clamp(3.25rem, 17vw, 4.75rem);

  /* ---- Space · 4pt scale ------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.375rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 2.75rem;
  --space-3xl: 4rem;

  /* ---- Rules, radii, motion ---------------------------------------------- */
  --rule-hair: 1px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --dur-instant: 90ms;
  --dur-short:   160ms;
  --dur-mid:     280ms;
  --dur-draw:    760ms;

  --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);

  --z-base: 1;
  --z-sticky: 20;
}

/* Fallback for engines without OKLCH (older Android WebViews still in use in-market). */
@supports not (color: oklch(50% 0.1 150)) {
  :root {
    --color-paper:       #f5faf6;
    --color-paper-2:     #eaf4ec;
    --color-paper-3:     #dcebdf;
    --color-ink:         #17281d;
    --color-ink-2:       #3a4f41;
    --color-muted:       #61756a;
    --color-rule:        #d3dfd6;
    --color-rule-2:      #e4ede6;
    --color-accent:      #0f8f45;
    --color-accent-deep: #0b7538;
    --color-accent-soft: #d6f0df;
    --color-accent-ink:  #f8fcf9;
    --color-focus:       #0c9b44;
    --color-warn:        #8a5a12;
    --color-warn-soft:   #f6efdf;
  }
}