/* =========================================================
   שדה חמד — Internal Ops System
   Extended tokens: brand + modern neutrals + accents
   Light + Dark mode, warm-professional vibe
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&family=Heebo:wght@300;400;500;700;800&family=Caveat:wght@400;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Suez+One&family=Noto+Sans+Hebrew:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand (from logo) ---------- */
  --pine-900: #1e3d3a;
  --pine-800: #265852;
  --pine-700: #2f6a62;
  --pine-600: #3c837a;
  --pine-500: #5ea59b;
  --pine-400: #83beb5;
  --pine-300: #a8ccc6;
  --pine-200: #cbe1dd;
  --pine-100: #e2eeeb;
  --pine-50:  #eff7f5;

  --brown-900: #3e2a1e;
  --brown-800: #5a3a27;
  --brown-700: #744a30;
  --brown-500: #a87a56;
  --brown-300: #d9bfa3;
  --brown-100: #f2e6d6;

  --peach-700: #d68263;
  --peach-600: #e89a7e;
  --peach-500: #f2ad92;
  --peach-400: #f7c2ab;
  --peach-300: #fbd6c5;
  --peach-200: #fde4d6;
  --peach-100: #fdefe6;

  --cream-50:  #fbf7f0;
  --cream-100: #f5ede0;
  --cream-200: #ebe0cd;

  /* ---------- Modern warm neutrals (stone-based) ---------- */
  --stone-0:   #ffffff;
  --stone-25:  #fbfaf8;
  --stone-50:  #f7f5f1;
  --stone-100: #efece6;
  --stone-150: #e6e2d9;
  --stone-200: #d9d4c8;
  --stone-300: #bfb8a8;
  --stone-400: #9a9284;
  --stone-500: #73695c;
  --stone-600: #544c42;
  --stone-700: #3d3730;
  --stone-800: #2a2520;
  --stone-900: #1a1614;
  --stone-950: #0f0d0b;

  /* ---------- Modern accents (soft blue + violet) ---------- */
  --azure-50:  #eef4ff;
  --azure-100: #dde9ff;
  --azure-300: #95b5ee;
  --azure-500: #5b7fd1;
  --azure-600: #4a67b8;
  --azure-700: #3b5294;

  --violet-50:  #f3efff;
  --violet-100: #e6deff;
  --violet-300: #b5a3ea;
  --violet-500: #8470c9;
  --violet-600: #6e5ab0;
  --violet-700: #564689;

  --amber-100: #fef3d7;
  --amber-300: #f3cc6e;
  --amber-500: #d9a73c;
  --amber-700: #8c6a1d;

  --rose-100: #fde2e1;
  --rose-300: #f1a3a1;
  --rose-500: #d6625f;
  --rose-700: #9c3d3a;

  --green-100: #d9ecd9;
  --green-300: #7cb57f;
  --green-500: #4a8f4e;
  --green-700: #2d6530;

  /* ---------- Semantic (Light) — warmth-first ---------- */
  --bg-page:       var(--cream-50);
  --bg-surface:    var(--stone-0);
  --bg-surface-2:  var(--cream-50);
  --bg-elevated:   var(--stone-0);
  --bg-muted:      var(--cream-100);
  --bg-sidebar:    var(--cream-100);
  --bg-nav:        var(--pine-900);
  --bg-tint-pine:  var(--pine-100);
  --bg-tint-peach: var(--peach-100);

  --fg-strong:   var(--pine-900);
  --fg-default:  var(--brown-800);
  --fg-muted:    var(--brown-500);
  --fg-subtle:   var(--stone-400);
  --fg-inverse:  var(--cream-50);
  --fg-brand:    var(--pine-800);

  --border-subtle:  var(--cream-200);
  --border-default: #d8c9b0;
  --border-strong:  var(--brown-300);
  --border-focus:   var(--pine-600);

  --accent-primary:      var(--pine-700);
  --accent-primary-hover: var(--pine-800);
  --accent-primary-soft: var(--pine-50);
  --accent-secondary:    var(--brown-700);
  --accent-violet:       var(--violet-600);
  --accent-peach:        var(--peach-600);

  --status-success-fg: var(--green-700);
  --status-success-bg: var(--green-100);
  --status-warning-fg: var(--amber-700);
  --status-warning-bg: var(--amber-100);
  --status-danger-fg:  var(--rose-700);
  --status-danger-bg:  var(--rose-100);
  --status-info-fg:    var(--azure-700);
  --status-info-bg:    var(--azure-50);

  /* ---------- Type ---------- */
  --font-sans: 'Assistant', 'Heebo', 'Arial Hebrew', system-ui, sans-serif;
  --font-display: 'Assistant', 'Heebo', system-ui, sans-serif;
  --font-display-chunky: 'Suez One', 'Assistant', 'Noto Sans Hebrew', sans-serif;
  --font-serif: 'Fraunces', 'Assistant', serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;

  /* ---------- Spacing ---------- */
  --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; --sp-20: 80px;

  /* ---------- Radii ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  /* ---------- Shadows (light mode) ---------- */
  --sh-xs: 0 1px 2px rgba(30, 25, 20, 0.04);
  --sh-sm: 0 1px 2px rgba(30, 25, 20, 0.05), 0 1px 3px rgba(30, 25, 20, 0.06);
  --sh-md: 0 4px 8px rgba(30, 25, 20, 0.05), 0 2px 4px rgba(30, 25, 20, 0.04);
  --sh-lg: 0 12px 24px rgba(30, 25, 20, 0.08), 0 4px 8px rgba(30, 25, 20, 0.04);
  --sh-xl: 0 24px 48px rgba(30, 25, 20, 0.12), 0 8px 16px rgba(30, 25, 20, 0.06);
  --sh-inner: inset 0 1px 2px rgba(30, 25, 20, 0.05);
  --sh-focus: 0 0 0 3px rgba(60, 131, 122, 0.25);

  /* ---------- Motion ---------- */
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-smooth: cubic-bezier(.4, 0, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.3, .64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
}

/* ---------- Dark Mode (warm-tinted, brand-coherent) ---------- */
[data-theme="dark"] {
  --bg-page:       #1a1612;
  --bg-surface:    #221d18;
  --bg-surface-2:  #26211b;
  --bg-elevated:   #2b261f;
  --bg-muted:      #322c25;
  --bg-sidebar:    #1d1813;
  --bg-nav:        #0f1d1b;
  --bg-tint-pine:  rgba(60, 131, 122, 0.10);
  --bg-tint-peach: rgba(232, 154, 126, 0.10);

  --fg-strong:   #f5f2ec;
  --fg-default:  #d4cfc3;
  --fg-muted:    #9a9284;
  --fg-subtle:   #6e6759;
  --fg-inverse:  #1a1614;
  --fg-brand:    var(--pine-400);

  --border-subtle:  #28241f;
  --border-default: #35302a;
  --border-strong:  #4a4238;
  --border-focus:   var(--pine-400);

  --accent-primary:       var(--pine-500);
  --accent-primary-hover: var(--pine-400);
  --accent-primary-soft:  #1a2f2c;

  --status-success-bg: rgba(74, 143, 78, 0.18);
  --status-warning-bg: rgba(217, 167, 60, 0.18);
  --status-danger-bg:  rgba(214, 98, 95, 0.18);
  --status-info-bg:    rgba(91, 127, 209, 0.15);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4);
  --sh-md: 0 4px 10px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --sh-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
  --sh-xl: 0 24px 48px rgba(0, 0, 0, 0.55);
  --sh-focus: 0 0 0 3px rgba(131, 190, 181, 0.3);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-page);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "ss01";
}
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg-page); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }

/* Focus */
:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }