/* «منصّتي» design tokens (--a-*). The brand (brand/README.md, identity «الشدّة») and the values public/css/site.css
   already uses, as named roles. Every academy stylesheet and the UI kit (ui.css) read these and nothing else.
   Light by default; the night look when <html data-theme="dark"> (the site's switch and the academy's own).
   On academy hosts, /theme.css (p5) loads after this file and overrides only the "slot" tokens marked below, so a
   teacher's palette recolours the kit without touching the neutrals, the type or the spacing. */
:root {
  /* Surfaces and text. */
  --a-paper: #FAF7F0;          /* page background */
  --a-surface: #FFFFFF;        /* cards on paper */
  --a-surface-2: #FAF7F0;      /* an inset inside a card (summary box, upload zone) */
  --a-raised: #FFFFFF;         /* sheets, dialogs, menus */
  --a-ink: #13233A;            /* text, 14.8:1 on paper */
  --a-muted: #5B6B7C;          /* secondary text, 5.1:1 on paper */
  --a-line: #E6E1D6;           /* hairlines and card borders */
  --a-edge: #D5CEC0;           /* secondary button borders */
  --a-outline: #8E8573;        /* input borders, 3.6:1 on white (non-text 3:1) */
  --a-scrim: rgb(19 35 58 / .48);

  /* Brand slots: /theme.css may override these five groups on an academy host. */
  --a-primary: #0B7A76;        /* slot: primary buttons, links, selected states (white on it 5.2:1) */
  --a-primary-strong: #096562; /* slot: hover and pressed */
  --a-on-primary: #FFFFFF;     /* slot */
  --a-primary-tint: #E3F4F2;   /* slot: selected chips, info notes */
  --a-brand: #0E9C97;          /* slot: brand surfaces (white text only at 24px bold+) */
  --a-accent: #FF8A3D;         /* slot: the shadda, highlights, live badge. Never white text on it. */
  --a-on-accent: #13233A;      /* slot: ink on apricot 6.7:1 */
  --a-accent-tint: #FFEBDD;    /* slot */
  --a-marker: #FFD3B0;         /* slot: the marker band behind one key word */

  /* Status. Text colours pass AA on their tints and on the surface. */
  --a-success: #1B7F45; --a-on-success: #FFFFFF; --a-success-tint: #E2F2E8;
  --a-warning: #9A6A00; --a-on-warning: #FFFFFF; --a-warning-tint: #FFF4D6;
  --a-danger: #B42D2D;  --a-on-danger: #FFFFFF;  --a-danger-tint: #FBE6E4;
  --a-info: var(--a-primary); --a-info-tint: var(--a-primary-tint);
  --a-live: var(--a-accent); --a-on-live: #13233A;   /* «مباشر»: apricot pill, ink text, ink dot */
  --a-whatsapp: #1B7F45; --a-whatsapp-tint: #E2F2E8;
  --a-sample: #FFEBDD; --a-sample-stripe: #FFD3B0;  /* the striped «مثال» ribbon */
  --a-board: #0F3B39; --a-on-board: #FFFFFF; --a-chalk: #FFD3B0;

  /* Focus: one ring everywhere, visible on every surface. */
  --a-focus: #0B7A76;
  --a-focus-ring: 0 0 0 3px var(--a-primary-tint);
  --a-focus-width: 3px;
  --a-focus-offset: 2px;

  /* Type. "Hessety Digits" (defined by site.css on hessety.com, by p5's self-hosted fonts on academy hosts) keeps
     0-9 Western inside Lemonada headings. */
  --a-font-display: "Hessety Digits", "Lemonada", "Readex Pro", "Segoe UI", Tahoma, sans-serif;
  --a-font-body: "Readex Pro", "Segoe UI", Tahoma, Arial, sans-serif;
  --a-font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  /* Scale (brand: Display 44/60 · H1 30/44 · H2 22/34 · H3 18/28 · Body 16/26 · Small 14/22 · Caption 12/18),
     mobile-first: display and h1 grow from phone to desktop. */
  --a-text-display: clamp(2rem, 1.45rem + 2.4vw, 2.75rem);   --a-lh-display: 1.36;
  --a-text-h1: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);         --a-lh-h1: 1.47;
  --a-text-h2: 1.375rem;   --a-lh-h2: 1.55;
  --a-text-h3: 1.125rem;   --a-lh-h3: 1.56;
  --a-text-body: 1rem;     --a-lh-body: 1.625;
  --a-text-small: .875rem; --a-lh-small: 1.57;
  --a-text-caption: .75rem; --a-lh-caption: 1.5;
  --a-text-lead: 1.125rem;
  --a-weight-regular: 400; --a-weight-medium: 500; --a-weight-semibold: 600; --a-weight-bold: 700;
  --a-measure: 60ch;

  /* Space: an 8-point grid with a 4 half-step. */
  --a-space-1: 4px; --a-space-2: 8px; --a-space-3: 12px; --a-space-4: 16px;
  --a-space-5: 24px; --a-space-6: 32px; --a-space-7: 48px; --a-space-8: 64px;
  --a-gutter: 16px;            /* page side padding on phones (24px from 768px) */
  --a-content: 640px;          /* one-column flows: setup, course wizard, checkout */
  --a-content-wide: 1120px;    /* dashboard, same as site.css .wrap */
  --a-form: 440px;             /* the form column beside the live preview (>= 1024px) */

  /* Shape (brand radii). */
  --a-radius-sm: 8px; --a-radius-btn: 14px; --a-radius-input: 12px; --a-radius-card: 20px;
  --a-radius-sheet: 28px; --a-radius-pill: 999px;
  --a-border: 1px;

  /* Touch targets. */
  --a-tap: 44px; --a-tap-lg: 52px; --a-tap-xl: 56px;

  /* Elevation: flat brand, the softest shadows. */
  --a-shadow-1: 0 1px 2px rgb(19 35 58 / .06);
  --a-shadow-2: 0 10px 28px rgb(19 35 58 / .12);
  --a-shadow-3: 0 12px 32px rgb(19 35 58 / .18);

  /* Motion. Reduced motion turns every duration to (almost) zero below. */
  --a-dur-1: 120ms;            /* press, colour */
  --a-dur-2: 200ms;            /* hover, chip select, toggles */
  --a-dur-3: 320ms;            /* sheets and toasts in */
  --a-dur-auto-advance: 500ms; /* single-choice questions move on after this (plan §2.3) */
  --a-ease-out: cubic-bezier(.2, .8, .2, 1);
  --a-ease-in: cubic-bezier(.4, 0, 1, 1);
  --a-ease-in-out: cubic-bezier(.45, 0, .2, 1);

  /* Layers (site.css: header 30, toast 55, skip link 60). */
  --a-z-sticky: 30; --a-z-bar: 40; --a-z-sheet: 50; --a-z-toast: 56;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --a-paper: #0D1826;
  --a-surface: #16263A;
  --a-surface-2: #112033;
  --a-raised: #1E3249;
  --a-ink: #EEF3F6;
  --a-muted: #9FB1C2;
  --a-line: #2A3F57;
  --a-edge: #2A3F57;
  --a-outline: #5C7590;
  --a-scrim: rgb(0 0 0 / .6);

  --a-primary: #2BB8B0;
  --a-primary-strong: #4CCBC3;
  --a-on-primary: #0D1826;
  --a-primary-tint: #12302F;
  --a-brand: #2BB8B0;
  --a-accent: #FF9A57;
  --a-on-accent: #13233A;
  --a-accent-tint: #3A2A1D;
  --a-marker: rgb(255 154 87 / .34);

  --a-success: #4CC98A; --a-on-success: #0D1826; --a-success-tint: #133A28;
  --a-warning: #F2C94C; --a-on-warning: #0D1826; --a-warning-tint: #3A3319;
  --a-danger: #FF8A86;  --a-on-danger: #0D1826;  --a-danger-tint: #46232A;
  --a-on-live: #13233A;
  --a-whatsapp: #4CC98A; --a-whatsapp-tint: #133A28;
  --a-sample: #3A2A1D; --a-sample-stripe: #4A3524;

  --a-focus: #2BB8B0;

  --a-shadow-1: none;
  --a-shadow-2: 0 10px 28px rgb(0 0 0 / .35);
  --a-shadow-3: 0 12px 32px rgb(0 0 0 / .45);

  color-scheme: dark;
}

@media (min-width: 768px) {
  :root { --a-gutter: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --a-dur-1: 1ms; --a-dur-2: 1ms; --a-dur-3: 1ms; --a-dur-auto-advance: 0ms; }
}