/* ═══════════════════════════════════════════════════════════════════
   ShukWAY · Design Tokens · v2
   Based on ShukWAY_Design_Guidelines_v1.md (Tehilla + Dov)
   "warm, Jerusalem, traditional-modern" — not boring admin
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Ploni Font · 6 weights ─── */
@font-face{
  font-family:'Ploni';
  font-weight:200; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ploni-ultralight-aaa.woff') format('woff');
}
@font-face{
  font-family:'Ploni';
  font-weight:300; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ploni-light-aaa.woff') format('woff');
}
@font-face{
  font-family:'Ploni';
  font-weight:500; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ploni-medium-aaa.woff') format('woff');
}
@font-face{
  font-family:'Ploni';
  font-weight:600; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ploni-demibold-aaa.woff') format('woff');
}
@font-face{
  font-family:'Ploni';
  font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ploni-bold-aaa.woff') format('woff');
}
@font-face{
  font-family:'Ploni';
  font-weight:900; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ploni-ultrabold-aaa.woff') format('woff');
}
@font-face{
  font-family:'Ploni';
  font-weight:400; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ploni-medium-aaa.woff') format('woff');
}

:root{
  /* ─── Primary Brand ─── */
  --teal:        #038A82;
  --teal-deep:   #026E68;
  --teal-soft:   #EFF8F7;
  --teal-mist:   #D4E8E1;

  --orange:      #E56E13;
  --orange-deep: #C25A0E;
  --orange-soft: #FCEEDB;
  --orange-mist: #FAE2C5;

  /* ─── Backgrounds (warm cream, never bright white!) ─── */
  --cream:       #FAF5EC;
  --cream-warm:  #F5EFE2;
  --cream-deep:  #EBE3D2;
  --paper:       #FFFEF9;
  --white:       #FFFFFF;

  /* ─── Text ─── */
  --ink:         #1A1A1A;
  --ink-soft:    #4A4A4A;
  --muted:       #6B6B6B;
  --subtle:      #9A9A9A;
  --whisper:     #9A9A9A;

  /* ─── Status (muted, not neon) ─── */
  --success:     #038A82;
  --success-bg:  #E8F2EF;
  --warning:     #F5A623;
  --warning-bg:  #FCF1DC;
  --danger:      #D43F3F;
  --danger-bg:   #F8E0E0;
  --info:        #2563EB;
  --info-bg:     #DBEAFE;

  /* ─── Borders ─── */
  --border:      #E8E0CD;
  --border-strong:#D4C9AE;
  --divider:     #F0E8D4;

  /* ─── Roles ─── */
  --role-ceo:    #038A82;
  --role-field:  #7C3AED;
  --role-data:   #E56E13;
  --role-prod:   #2563EB;
  --role-dev:    #1A1A1A;
  --role-design: #DB2777;

  /* ─── Typography ─── */
  --font:       'Ploni', 'Ploni Hebrew', ui-sans-serif, system-ui, sans-serif;
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   16px;
  --text-md:     16px;
  --text-lg:     18px;
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-3xl:    36px;
  --text-4xl:    44px;
  --text-kpi:    44px;
  --text-hero:   56px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* ─── Spacing (4px base) ─── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;

  /* ─── Radius (rounder = warmer) ─── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;
  --r-pill:9999px;

  /* ─── Shadows (warm, not cold!) ─── */
  --sh-xs:  0 1px 2px rgba(120,90,40,0.05);
  --sh-sm:  0 2px 6px rgba(120,90,40,0.08);
  --sh-md:  0 4px 12px rgba(120,90,40,0.10);
  --sh-lg:  0 8px 24px rgba(120,90,40,0.12);
  --sh-xl:  0 12px 40px rgba(120,90,40,0.16);

  /* ─── Layout ─── */
  --sidebar-w: 248px;
  --sidebar-collapsed-w: 64px;
  --topbar-h: 60px;
  --content-max: 1440px;

  /* ─── Font Weights ─── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ─── Transitions ─── */
  --tx-fast: 150ms ease;
  --tx-base: 250ms ease;
  --tx-slow: 400ms ease;

  /* ─── Extended Palette (Sprint 15) ─── */
  --plum:      #8C3F6B;
  --plum-soft: #F3E8EF;

  /* ─── Z-Index Scale ─── */
  --z-base: 1;
  --z-dropdown: 50;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 200;

  /* ─── Easing ─── */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ─── Reset + Defaults ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--font);
  font-weight:400;
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--ink);
  background:var(--cream);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern','liga';
  overflow-x:hidden;
}

/* ─── Typography helpers ─── */
.t-xs      {font-size:var(--text-xs);font-weight:var(--fw-regular);line-height:1.4}
.t-sm      {font-size:var(--text-sm);line-height:1.5}
.t-md      {font-size:var(--text-md)}
.t-base    {font-size:var(--text-base)}
.t-lg      {font-size:var(--text-lg)}
.t-xl      {font-size:var(--text-xl)}
.t-2xl     {font-size:var(--text-2xl)}
.t-3xl     {font-size:var(--text-3xl)}
.t-display {font-size:var(--text-4xl);font-weight:800;line-height:1.1;letter-spacing:-0.02em}
.t-kpi     {font-size:var(--text-kpi);font-weight:800;line-height:1.1;letter-spacing:-0.02em}
.t-hero    {font-size:var(--text-hero);font-weight:800;line-height:1;letter-spacing:-0.025em}

.w-200{font-weight:200}
.w-300{font-weight:300}
.w-400{font-weight:400}
.w-500{font-weight:500}
.w-600{font-weight:600}
.w-700{font-weight:700}
.w-800{font-weight:800}
.w-900{font-weight:900}

.c-ink    {color:var(--ink)}
.c-ink-soft{color:var(--ink-soft)}
.c-muted  {color:var(--muted)}
.c-subtle {color:var(--subtle)}
.c-teal   {color:var(--teal)}
.c-orange {color:var(--orange)}
.c-success{color:var(--success)}
.c-warning{color:var(--warning)}
.c-danger {color:var(--danger)}

/* ─── Tabular numbers (LTR in RTL context) ─── */
/* Tabular nums: inherit weight from parent, don't force bold */
.num{font-family:'Roboto',system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;direction:ltr;display:inline-block}

/* ─── Focus ring ─── */
:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:var(--r-sm);
}