/* ==========================================================================
   SALONDA — design tokens  ("Nuit de riad")
   Single source of truth for colour, type, space, motion.
   Dark is the default identity. Light is opt-in: <html data-theme="light">.
   Every text/background pair was measured against WCAG 2.2 (ratios noted).
   No blur, no shadows: depth = tonal steps + 1px lines.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* — Surfaces (dark) — */
  --c-canvas:  #0F100E;   /* Obsidienne : page background                */
  --c-surface: #161714;   /* Tadelakt   : panels, rows, inputs           */
  --c-raised:  #1F201C;   /* Pierre     : menus, popovers, selected rows */

  /* — Ink (dark) — ratios vs canvas / surface / raised */
  --c-text:    #ECE6DA;   /* Chaux  15.4 / 14.5 / 13.2 (AAA)             */
  --c-muted:   #A8A18F;   /* Sable   7.4 /  7.0 /  6.4 (AA; AAA on canvas) */

  /* — Lines — */
  --c-line:        rgba(236, 230, 218, .16);  /* decorative hairline */
  --c-line-strong: #767063;                   /* control borders: >= 3.3:1 (WCAG 1.4.11) */

  /* — Accent: Laiton (brass). Keep under ~5% of any screen. — */
  --c-brass:       #B9975B;   /* 6.9 / 6.6 / 6.0 as text or icon */
  --c-brass-hover: #C7A76E;
  --c-on-brass:    #0F100E;   /* text on a brass fill: 6.9 */

  /* — Secondary: Zellige (deep green) — fills only (selected, confirmed) — */
  --c-zellige:     #234A3E;
  --c-on-zellige:  #ECE6DA;   /* 8.0 */

  /* — Status (muted; always paired with an icon or a word) — */
  --c-ok:   #6FAF95;          /* 7.5 / 7.1 / 6.4 */
  --c-warn: #D09A45;          /* 7.6 / 7.2 / 6.6 */
  --c-bad:  #DB7560;          /* 6.1 / 5.8 / 5.3 */

  /* — Staff colours for the agenda (muted; ALWAYS add initials) — */
  --c-staff-1: #B9975B;  --c-staff-2: #6FAF95;  --c-staff-3: #8E9FD0;
  --c-staff-4: #C98BA0;  --c-staff-5: #B3A06C;  --c-staff-6: #7FB4C2;

  --c-focus: var(--c-brass);

  /* — Type families (Arabic swaps in under :lang(ar), see bottom) — */
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-label:   "Marcellus", "Newsreader", Georgia, serif;
  --f-ui:      "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* — Type scale (never below 13px) — */
  --t-xs:   .8125rem;
  --t-sm:   .9375rem;
  --t-base: 1rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  --t-2xl:  clamp(2.25rem, 1.2rem + 4vw, 3.75rem);
  --t-3xl:  clamp(2.75rem, 1rem + 7vw, 6rem);

  --lh-tight: 1.05;
  --lh-ui:    1.5;
  --lh-serif: 1.6;
  --measure:  62ch;           /* max line length for reading text */

  /* — Space (4px base) — */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;    --s-10: 9rem;

  /* — Shape: almost square. The arch is the one curved gesture. — */
  --r-0: 0;
  --r-1: 2px;                 /* buttons, inputs, rows */
  --r-2: 4px;                 /* panels                */

  /* — Touch targets — */
  --hit:    3rem;             /* 48px minimum (CRM, booking)     */
  --hit-sm: 2.75rem;          /* 44px, dense tables only         */

  /* — Layout — */
  --page-max: 78rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* — Motion — */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
}

/* ---------- Light mode: "Chaux du jour" (reception desks in daylight) ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --c-canvas:  #F4F0E8;
  --c-surface: #FBF9F4;
  --c-raised:  #FFFFFF;

  --c-text:    #181714;   /* 15.8 / 17.0 / 17.9 (AAA) */
  --c-muted:   #4F493F;   /*  7.8 /  8.5 /  8.9 (AAA) */

  --c-line:        rgba(24, 23, 20, .14);
  --c-line-strong: #7D776A;   /* >= 3.9:1 */

  --c-brass:       #7E5F2A;   /* 5.2 / 5.6 / 5.9 as text */
  --c-brass-hover: #6C4F20;
  --c-on-brass:    #FFFFFF;   /* 5.9 */

  --c-zellige:     #1F4A3C;
  --c-on-zellige:  #F4F0E8;   /* 8.8 */

  --c-ok:   #2F6F58;          /* 5.2+ */
  --c-warn: #8F5F12;          /* 4.8+ */
  --c-bad:  #A63F2C;          /* 5.5+ */

  --c-staff-1: #7E5F2A;  --c-staff-2: #2F6F58;  --c-staff-3: #4A5C9A;
  --c-staff-4: #9A4A66;  --c-staff-5: #7A6A25;  --c-staff-6: #2F6F84;
}

/* ---------- Arabic / RTL (use <html lang="ar" dir="rtl">) ---------- */
:lang(ar) {
  --f-display: "Amiri", "Noto Naskh Arabic", "Newsreader", serif;
  --f-label:   "Reem Kufi", "Marcellus", sans-serif;
  --f-ui:      "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
  --lh-ui:    1.7;            /* Arabic needs more air */
  --lh-serif: 1.9;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; }
}