/* ============================================================
   SALONIQA — Design System v1.0 · TOKENS
   Single source of truth for colour, type, space, radius,
   shadow, motion, z-index. Consumed by every component.
   Brand: Emerald #0F5C4D · Rose-gold · Gold · Ivory · White.
   ============================================================ */
:root{
  /* ── Brand ── */
  --sq-emerald:        #0F5C4D;
  --sq-emerald-700:    #0B463B;
  --sq-emerald-600:    #0D5142;
  --sq-emerald-300:    #6FA598;
  --sq-emerald-100:    #D7E7E2;
  --sq-emerald-50:     #EAF3F0;

  --sq-rose:           #B76E79;   /* rose-gold accent */
  --sq-rose-600:       #A25863;
  --sq-rose-200:       #EAD1D5;
  --sq-rose-50:        #F7ECEE;

  --sq-gold:           #C7A24A;   /* gold highlight */
  --sq-gold-600:       #A9852F;
  --sq-gold-100:       #F0E4C4;
  --sq-gold-50:        #F8F1DE;

  /* ── Neutrals / surfaces ── */
  --sq-white:          #FFFFFF;
  --sq-ivory:          #FBF9F5;   /* app background */
  --sq-ivory-2:        #F5F0E8;
  --sq-ink:            #1C2320;   /* primary text */
  --sq-ink-2:          #4C5651;   /* secondary text */
  --sq-ink-3:          #8A938E;   /* muted / captions */
  --sq-line:           rgba(20,40,34,.09);   /* hairline border */
  --sq-line-strong:    rgba(20,40,34,.16);

  /* ── Semantic status ── */
  --sq-success:        #1E9E6A;  --sq-success-bg: #E4F5EC;
  --sq-warning:        #C79A2E;  --sq-warning-bg: #F8EFD5;
  --sq-danger:         #C0453B;  --sq-danger-bg:  #FBE7E4;
  --sq-info:           #2F72B8;  --sq-info-bg:    #E4EFFA;

  /* ── Layered surface tokens (theme-swappable) ── */
  --sq-bg:             var(--sq-ivory);
  --sq-surface:        var(--sq-white);
  --sq-surface-2:      #FCFBF8;
  --sq-surface-inset:  #F6F2EB;
  --sq-glass:          rgba(255,255,255,.62);
  --sq-glass-brd:      rgba(255,255,255,.55);

  /* ── Typography ── */
  --sq-font-display: 'Playfair Display', 'Fraunces', Georgia, serif;
  --sq-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sq-font-ar:      'Tajawal', 'IBM Plex Sans Arabic', var(--sq-font-ui);
  --sq-font-mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --sq-fs-display: 34px;  --sq-lh-display: 1.1;
  --sq-fs-h1:      26px;  --sq-lh-h1: 1.18;
  --sq-fs-h2:      20px;  --sq-lh-h2: 1.25;
  --sq-fs-h3:      16px;  --sq-lh-h3: 1.35;
  --sq-fs-body:    14px;  --sq-lh-body: 1.55;
  --sq-fs-sm:      13px;
  --sq-fs-xs:      12px;
  --sq-fs-cap:     11px;  /* eyebrows / labels */

  --sq-fw-regular: 400;
  --sq-fw-medium:  500;
  --sq-fw-semi:    600;
  --sq-fw-bold:    700;
  --sq-track-cap:  .10em;  /* letter-spacing for eyebrows */

  /* ── Spacing (8pt grid, 4px base) ── */
  --sq-1: 4px;  --sq-2: 8px;  --sq-3: 12px; --sq-4: 16px;
  --sq-5: 20px; --sq-6: 24px; --sq-7: 32px; --sq-8: 40px;
  --sq-9: 48px; --sq-10: 64px; --sq-11: 80px;

  /* ── Radius ── */
  --sq-r-xs: 8px;
  --sq-r-sm: 12px;
  --sq-r:    18px;
  --sq-r-lg: 24px;
  --sq-r-pill: 999px;

  /* ── Shadows (soft, layered) ── */
  --sq-sh-1: 0 1px 2px rgba(24,40,34,.05), 0 2px 6px rgba(24,40,34,.05);
  --sq-sh-2: 0 4px 10px rgba(24,40,34,.06), 0 12px 26px rgba(24,40,34,.07);
  --sq-sh-3: 0 12px 28px rgba(24,40,34,.10), 0 30px 60px rgba(24,40,34,.10);
  --sq-sh-emerald: 0 8px 22px rgba(15,92,77,.22);
  --sq-sh-rose:    0 8px 22px rgba(183,110,121,.22);
  --sq-ring: 0 0 0 3px rgba(15,92,77,.16);   /* focus ring */

  /* ── Motion ── */
  --sq-ease: cubic-bezier(.22,.61,.36,1);
  --sq-ease-out: cubic-bezier(.16,1,.3,1);
  --sq-dur-1: .12s;
  --sq-dur-2: .22s;
  --sq-dur-3: .38s;

  /* ── Z-index ── */
  --sq-z-nav: 50;
  --sq-z-sticky: 40;
  --sq-z-dropdown: 100;
  --sq-z-modal: 200;
  --sq-z-toast: 300;
}

/* ── Dark mode (opt-in via data-theme) ── */
:root[data-theme="dark"]{
  --sq-bg:            #0E1512;
  --sq-surface:       #14201B;
  --sq-surface-2:     #172420;
  --sq-surface-inset: #101915;
  --sq-glass:         rgba(20,32,27,.55);
  --sq-glass-brd:     rgba(255,255,255,.08);
  --sq-ink:           #ECF2EF;
  --sq-ink-2:         #A7B3AE;
  --sq-ink-3:         #74807B;
  --sq-line:          rgba(255,255,255,.08);
  --sq-line-strong:   rgba(255,255,255,.14);
  --sq-emerald-50:    #14261F;
  --sq-emerald-100:   #1B342B;
  --sq-gold-50:       #241F12;
  --sq-rose-50:       #241419;
  --sq-success-bg:#123021; --sq-warning-bg:#2A2410; --sq-danger-bg:#2E1512; --sq-info-bg:#122435;
}

@media (prefers-reduced-motion: reduce){
  :root{ --sq-dur-1:0s; --sq-dur-2:0s; --sq-dur-3:0s; }
}