/* Clinchr V3 — Design Tokens
   Desktop-first, remodeler-first operating system.
   All values as CSS custom properties. No rules here. */

:root {
  /* ── 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;

  /* ── Typography ── */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  /* ── Neutral palette ── */
  --color-canvas:        #F6F6F4;
  --color-surface:       #FFFFFF;
  --color-surface-raised:#FFFFFF;
  --color-surface-low:   #F0F0EE;
  --color-border:        #E3E3DF;
  --color-border-strong: #C6C6C1;
  --color-divider:       #EAEAE6;

  --color-text:          #18181A;
  --color-text-2:        #52524F;
  --color-text-3:        #8A8A86;
  --color-text-4:        #B6B6B1;
  --color-text-inv:      #FFFFFF;
  --color-text-inv-2:    rgba(255,255,255,0.7);

  /* ── Brand ── */
  --color-brand:         #1C3D35;
  --color-brand-mid:     #2B5E50;
  --color-brand-light:   #E8F2EF;
  --color-brand-accent:  #3D8A74;

  /* ── Semantic ── */
  --color-risk:          #B91C1C;
  --color-risk-mid:      #DC2626;
  --color-risk-bg:       #FEF2F2;
  --color-risk-border:   #FECACA;

  --color-warn:          #B45309;
  --color-warn-mid:      #D97706;
  --color-warn-bg:       #FFFBEB;
  --color-warn-border:   #FDE68A;

  --color-ok:            #166534;
  --color-ok-mid:        #16A34A;
  --color-ok-bg:         #F0FDF4;
  --color-ok-border:     #BBF7D0;

  --color-info:          #1D4ED8;
  --color-info-mid:      #2563EB;
  --color-info-bg:       #EFF6FF;
  --color-info-border:   #BFDBFE;

  --color-neutral-bg:    #F4F4F2;
  --color-neutral-border:#E0E0DC;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm:    0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --shadow-md:    0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.06);
  --shadow-lg:    0 10px 24px -4px rgb(0 0 0 / 0.09), 0 4px 10px -3px rgb(0 0 0 / 0.06);
  --shadow-drawer: -2px 0 12px 0 rgb(0 0 0 / 0.07);

  /* ── Radius ── */
  --radius-sm:  3px;
  --radius-md:  5px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-pill: 999px;

  /* ── Transitions ── */
  --transition-fast:  100ms ease;
  --transition-base:  160ms ease;
  --transition-slow:  240ms ease;

  /* ── Layout ── */
  --topbar-h:      52px;
  --rail-w:        200px;
  --drawer-w:      320px;
  --page-header-h: 64px;

  /* ── Z-index layers ── */
  --z-base:    1;
  --z-above:   10;
  --z-rail:    80;
  --z-topbar:  100;
  --z-drawer:  90;
  --z-overlay: 200;
  --z-modal:   300;
}