/* Design tokens — DAWATI palette adapted for تعاهد (SPEC §9).
   Per-project branding overrides --primary / --accent / --on-primary at runtime (state.js → :root style). */
:root {
  --primary: #125B50;
  --primary-dark: #0D423A;
  --primary-deep: #0F3D33;
  --accent: #C9A84C;
  --gold: #C9A84C;
  --gold-dark: #A07830;
  --gold-ink: #7A5A14;
  --on-gold: #3B2A08;         /* ink on a platform-gold fill — never the tenant's on-accent */        /* platform gold as small text on white — 6.3:1 */
  --gold-light: #EBD08A;
  --bg: #FBF8F1;
  --surface: #FFFFFF;
  --surface-2: #F4EFE3;
  --ink: #1F2A26;
  --muted: #5A6663;
  --line: #E6E0D2;
  --on-primary: #FFFFFF;
  --on-accent: #1F2A26;
  /* fills computed by applyBranding so any tenant pair stays AA (see state.js) */
  --primary-fill: #125B50;
  --on-primary-fill: #FFFFFF;
  --primary-ink: #125B50;
  --primary-line: #125B50;
  --accent-line: #A07830;
  --accent-fill: #C9A84C;
  --on-accent-fill: #1F2A26;
  --accent-ink: #7A5A14;
  --line-strong: #8C948F;
  --surface-3: #EDE6D6;
  --backdrop: rgba(15, 61, 51, 0.55);
  --nav-badge: #B3261E;

  /* legend (SPEC §7): student / group / date / system */
  --c-student: #B3261E;
  --c-group: #9A5B00;
  --c-date: #1A5FB4;
  --c-system: #125B50;

  /* semantic */
  --ok: #1B7F4B;
  --ok-bg: #E6F4EC;
  --warn: #8A5300;
  --warn-bg: #FFF3DC;
  --err: #B3261E;
  --err-bg: #FBE9E7;
  --info: #1A5FB4;
  --info-bg: #E8F0FB;

  /* type */
  --font-body: 'Noto Naskh Arabic', 'Tajawal', system-ui, -apple-system, sans-serif;
  --font-head: 'Reem Kufi', 'Tajawal', system-ui, sans-serif;
  --font-splash: 'Amiri', 'Noto Naskh Arabic', serif;
  --font-latin: 'Tajawal', system-ui, sans-serif;
  --fs-xs: 0.875rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2rem;
  --lh: 1.75;

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(31, 42, 38, 0.05), 0 8px 20px -10px rgba(31, 42, 38, 0.18);
  --sh-2: 0 16px 40px -16px rgba(31, 42, 38, 0.40);
  --ring: 0 0 0 3px rgba(18, 91, 80, 0.35);

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* layout */
  --tap: 44px;
  /* The progress grid's gutter. It is a token because it is the one measurement that decides whether a row
     of approved units reads as separate achievements or as one gold band — and it has to stay in step with
     the column count, which the media queries below the grid rules change with the screen. */
  --grid-gap: 14px;
  --fab-h: 56px;
  --topbar-h: 56px;
  --sticky-top: calc(56px + env(safe-area-inset-top, 0px));
  --nav-h: 64px;
  --content-w: 760px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tenant-derived neutrals: lines, tints, shadows, ring and backdrop take the project's primary so any brand pair
   gets a matching surface system. The static values above stay as the fallback. Text colours are never derived. */
@supports (color: color-mix(in srgb, red 10%, white)) {
  :root {
    --bg: color-mix(in srgb, var(--primary) 4%, white);
    --line: color-mix(in srgb, var(--primary) 14%, white);
    --surface-2: color-mix(in srgb, var(--primary) 6%, white);
    --surface-3: color-mix(in srgb, var(--primary) 11%, white);
    --sh-1: 0 1px 2px color-mix(in srgb, var(--primary-deep) 6%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--primary-deep) 22%, transparent);
    --sh-2: 0 16px 40px -16px color-mix(in srgb, var(--primary-deep) 45%, transparent);
    --ring: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
    --backdrop: color-mix(in srgb, var(--primary-deep) 55%, transparent);
  }
}