/* ═══════════════════════════════════════════════════════════
   YANTRA — DESIGN TOKENS
   Rule: koi bhi color/spacing/font size yahan se hi aayega.
   Page pe direct value likhna MANA hai.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── SPACING — sirf 6 values, koi 7th nahi ── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* ── RADIUS ── */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* ── TYPE ── */
  --font-ui: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Noto Sans Devanagari', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* panel me sirf 3 sizes — marketing page alag baat hai */
  --t-body: 13px;      /* table, body, inputs */
  --t-head: 15px;      /* card heading, section title */
  --t-title: 20px;     /* page title */
  --t-micro: 11px;     /* labels, eyebrows, pills */
  --t-big: 28px;       /* KPI numbers */

  --w-normal: 400;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* ── LAYOUT ── */
  --rail-w: 64px;
  --nav-w: 208px;
  --right-w: 280px;
  --topbar-h: 56px;
  --row-h: 44px;
  --btn-h: 36px;
  --btn-h-sm: 28px;

  /* ── SEMANTIC COLORS (light = default) ── */
  --rail-bg: #0B2E29;
  --rail-fg: #8B93A7;
  --rail-fg-active: #FFFFFF;
  --rail-active-bg: rgba(16, 185, 129, .22);

  --nav-bg: #FAFBFC;
  --canvas-bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #F6F8FA;
  --surface-hover: #F2F4F7;

  --border: #E4E7EC;
  --border-strong: #D0D5DD;

  --text: #101828;
  --text-2: #475467;
  --text-muted: #667085;
  --text-faint: #98A2B3;

  --primary: #0A7C5F;
  --primary-hover: #086B52;
  --primary-soft: rgba(10, 124, 95, .08);
  --primary-soft-2: rgba(10, 124, 95, .14);
  --on-primary: #FFFFFF;

  /* node types — rang se pehchan */
  --node-trigger: #0891B2;
  --node-trigger-soft: rgba(8, 145, 178, .10);
  --node-action: #0A7C5F;
  --node-action-soft: rgba(10, 124, 95, .10);
  --node-logic: #B87A00;
  --node-logic-soft: rgba(184, 122, 0, .12);
  --node-ai-a: #0A7C5F;
  --node-ai-b: #22C55E;
  --node-error: #D9375B;
  --node-error-soft: rgba(217, 55, 91, .10);

  --success: #17B26A;
  --success-soft: rgba(23, 178, 106, .14);
  --warn: #B87A00;
  --warn-soft: rgba(184, 122, 0, .12);
  --error: #D9375B;
  --error-soft: rgba(217, 55, 91, .10);
  --info: #0891B2;
  --info-soft: rgba(8, 145, 178, .10);
  --wa: #25D366;

  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow: 0 4px 12px -2px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .16);
  --shadow-node: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px -4px rgba(16, 24, 40, .10);

  --grid-dot: #DDE2E9;
  --edge: #C3CBD6;
}

/* ── DARK MODE (toggle, default nahi) ── */
:root[data-theme="dark"] {
  --rail-bg: #06120F;
  --rail-fg: #667085;
  --rail-fg-active: #FFFFFF;
  --rail-active-bg: rgba(16, 185, 129, .24);

  --nav-bg: #091714;
  --canvas-bg: #08130F;
  --surface: #0E1B17;
  --surface-2: #13231E;
  --surface-hover: #17281F;

  --border: #1E332C;
  --border-strong: #2A463C;

  --text: #EDEFF4;
  --text-2: #A8B0C0;
  --text-muted: #8A93A6;
  --text-faint: #5F677A;

  --primary: #10B981;
  --primary-hover: #34D399;
  --primary-soft: rgba(16, 185, 129, .14);
  --primary-soft-2: rgba(16, 185, 129, .22);

  --node-trigger: #22D3EE;
  --node-trigger-soft: rgba(34, 211, 238, .12);
  --node-action: #10B981;
  --node-action-soft: rgba(16, 185, 129, .16);
  --node-logic: #FFB224;
  --node-logic-soft: rgba(255, 178, 36, .14);
  --node-ai-a: #10B981;
  --node-ai-b: #7BE495;
  --node-error: #FF5C7A;
  --node-error-soft: rgba(255, 92, 122, .12);

  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, .16);
  --warn: #FFB224;
  --warn-soft: rgba(255, 178, 36, .14);
  --error: #FF5C7A;
  --error-soft: rgba(255, 92, 122, .12);
  --info: #22D3EE;
  --info-soft: rgba(34, 211, 238, .12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
  --shadow-node: 0 2px 10px rgba(0, 0, 0, .45);

  --grid-dot: #16291F;
  --edge: #2F4A3E;
}