/* SK Arabians — design tokens. The ONE place for colours, type, spacing, radius, elevation, layers and motion, shared by
   the public website, the staff system and SK Arabian Studio (loaded first by every layout).
   One brand: the website and the staff system share the same navy and gold (navy #213562, gold #b08d57 — decided
   October 2026, so that signing in feels like the same brand world as skarabian.com). The staff system's --p-* brand
   names below now point at the website family; its neutrals (ink, muted, lines, page grey) stay its own. Printed Studio
   documents and printouts set their own colours in studio-doc.css / print.css and do not read these.
   The shared design language (type scale, spacing, radius, shadows, glass, motifs) is in brand.css.
   Stylesheets use semantic names (site.css: --bg, --text, --gold…; portal.css: --bg, --card, --ink…), which point at these.
   Breakpoints (media queries cannot read variables): 390 · 640 · 768 · 900 · 1024 · 1366 · 1440 · 1920. */

:root {
  /* ---- brand: website, Studio screens, printed documents, emails ---- */
  --c-navy: #213562;
  --c-navy-2: #2c4478;
  --c-navy-deep: #0f1a33;
  --c-navy-ink: #13213f;
  --c-gold: #b08d57;
  --c-gold-2: #c9a46a;
  --c-gold-soft: #e3cfa8;
  --c-ivory: #f8f5ef;
  --c-soft: #c3cbe0;
  --c-slate: #5c6782;
  --c-line: #e3e7ef;
  --c-line-warm: #e8dfcd;
  --c-mist: #f4f6fa;
  --c-white: #ffffff;

  /* ---- staff system: the brand names point at the one family above; neutrals are its own ---- */
  --p-night: var(--c-navy-deep);
  --p-navy-deep: var(--c-navy-ink);
  --p-navy: var(--c-navy);
  --p-navy-2: var(--c-navy-2);
  --p-gold: var(--c-gold);
  --p-gold-2: var(--c-gold-2);
  --p-gold-soft: #f4ecdd;          /* the pale gold fill of light surfaces (selection, gold badges) */
  --p-text-2: var(--c-soft);
  --p-icon: #8f9bb8;
  --p-ink: #18202f;
  --p-ink-2: #3a4458;
  --p-muted: #697386;
  --p-line: #e1e5ec;
  --p-line-2: #eceff4;
  --p-bg: #f4f5f8;
  --p-hover: #f7f8fb;

  /* ---- status (light paper values; the dark layers mix lighter tones of the same hues) ---- */
  --c-ok: #18744a;
  --c-ok-bg: #e8f4ee;
  --c-warn: #8a6100;
  --c-warn-bg: #fdf3dc;
  --c-bad: #b02a2a;
  --c-bad-bg: #fcecec;
  --c-bad-light: #ff9e9e;
  --c-info: #2a3f6e;
  --c-info-bg: #ecf1f9;

  /* ---- type ---- */
  --font-display: "Marcellus", "Amiri", Georgia, "Times New Roman", serif;
  --font-text: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-doc: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;   /* printed documents only */
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --fs-30: 30px; --fs-36: 36px; --fs-48: 48px; --fs-60: 60px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.55;
  --tracking-caps: .08em;

  /* ---- spacing (8px grid, 4px half-steps) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- radius ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px;

  /* ---- elevation, glow, blur ---- */
  --elev-1: 0 1px 2px rgba(8, 18, 43, .06);
  --elev-2: 0 6px 18px rgba(8, 18, 43, .12);
  --elev-3: 0 12px 32px rgba(8, 18, 43, .18), 0 2px 6px rgba(8, 18, 43, .08);
  --elev-4: 0 20px 50px rgba(0, 0, 0, .45);
  --glow-gold: 0 0 0 1px rgba(201, 164, 106, .35), 0 10px 40px -10px rgba(201, 164, 106, .35);
  --focus-ring: 0 0 0 3px rgba(196, 162, 108, .55);
  --blur-sm: 4px; --blur-md: 8px; --blur-lg: 16px;

  /* ---- layers ---- */
  --z-raised: 1; --z-sticky: 20; --z-header: 40; --z-dropdown: 60; --z-drawer: 70; --z-overlay: 80;
  --z-modal: 100; --z-popover: 110; --z-toast: 120; --z-tooltip: 130; --z-skip: 140;

  /* ---- motion ---- */
  --dur-fast: 150ms; --dur: 200ms; --dur-slow: 250ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  /* the website's cinematic scale: hover → small change → reveal → hero → drift; one long ambient loop */
  --dur-xs: 150ms; --dur-sm: 250ms; --dur-md: 450ms; --dur-lg: 700ms; --dur-xl: 1200ms; --dur-ambient: 18s;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);       /* reveals: fast start, long soft landing */
  --ease-in-out-quint: cubic-bezier(.83, 0, .17, 1);  /* crossfades and wipes */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);     /* magnetic hover only (a small overshoot) */
  --stagger: 60ms;                                    /* delay between items of a group */

  /* ---- sizes ---- */
  --ctl-sm: 36px; --ctl: 42px; --ctl-lg: 48px;          /* buttons and inputs: 40–44px is the default */
  --site-max: 1320px; --app-max: 1600px;
  --app-pad: 24px;
  --topbar-h: 64px; --sidebar-w: 256px; --sidebar-w-collapsed: 72px;
}
html[dir="rtl"] {
  --font-display: "Amiri", "Marcellus", Georgia, serif;
  --font-text: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 899px) { :root { --app-pad: 16px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-xs: 0ms; --dur-sm: 0ms; --stagger: 0ms; } }