/*
 * Tamalak design tokens, v2 "Plan & Line" (web).
 * Mirrors tokens.ts (mobile/src/theme) one-to-one. Do not hardcode colours elsewhere:
 * every other stylesheet reads these variables. If tokens.ts changes, update this file only.
 */
:root {
  /* themes.dark ("Lounge") */
  --bg: #0A0F18;
  --card: #121A27;
  --sunk: #19222F;
  --ink: #EEE6D8;
  --ink2: #A8A194;
  --line: rgba(238,230,216,0.13);
  --line2: rgba(238,230,216,0.07);
  --gold: #C6A46C;
  --gold-text: #D8BC88;
  --gold-soft: rgba(198,164,108,0.14);
  --cool: #93B2C0;
  --cool-soft: rgba(147,178,192,0.12);
  --btn: #D9C08F;
  --on-btn: #0A0F18;
  --ok: #8CC4A6;
  --ok-soft: rgba(140,196,166,0.13);
  --err: #E59C90;
  --grid: rgba(238,230,216,0.04);
  --glass: rgba(16,23,35,0.78);
  --deep: #141E2E;
  --deep2: #2A3549;
  --on-deep: #F1EADD;
  --on-deep2: #A9A396;
  --gold-on-deep: #C6A46C;
  --grid-on-deep: rgba(241,234,221,0.06);
  --glass-on-deep: rgba(14,23,38,0.55);
  --scrim: rgba(3,5,9,0.62);

  /* radius */
  --r-chip: 10px;
  --r-input: 14px;
  --r-btn: 16px;
  --r-card: 20px;
  --r-hero: 24px;
  --r-sheet: 30px;

  /* spacing (4-pt base, 8-pt rhythm) */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-screen: 20px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;

  /* type families */
  --serif: "Newsreader", Georgia, serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  /* motif */
  --grid-size: 22px;
  --node: 7px;
  --tick: 12px;

  /* motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --stagger: 80ms;

  color-scheme: dark;
}
/* The public site is dark-only ("Lounge"). The light "Gallery" values live in tokens.ts. */

/* Arabic swaps serif → Noto Naskh Arabic, sans → IBM Plex Sans Arabic */
:root:lang(ar) {
  --serif: "Noto Naskh Arabic", "Newsreader", serif;
  --sans: "IBM Plex Sans Arabic", "Geist", sans-serif;
}