/* =============================================================================
   SENTINO AI — DESIGN TOKENS v2
   New design language: Inspector variant + wireframe system
   Warm bone palette · Inter Tight + Playfair Display + JetBrains Mono
   ============================================================================= */

:root {
  /* ── Core Palette (warm bone) ── */
  --bg:          #FAFAF8;
  --bg-muted:    #EEEDE8;
  --bg-elevated: #FFFFFF;
  --surface:     #FFFFFF;
  --fg:          #1A1A1A;
  --fg-muted:    #555550;
  --fg-faint:    #999994;
  --accent:      #F97316;
  --accent-hover:#EA580C;
  --accent-light:rgba(249, 115, 22, 0.07);
  --white:       #FFFFFF;

  /* ── Semantic Colors ── */
  --success:       #16A34A;
  --success-light: rgba(22, 163, 74, 0.07);
  --warning:       #D97706;
  --warning-light: rgba(217, 119, 6, 0.07);
  --error:         #DC2626;
  --error-light:   rgba(220, 38, 38, 0.07);
  --info:          #2563EB;
  --info-light:    rgba(37, 99, 235, 0.07);

  /* ── Borders ── */
  --border:       #D0D0CC;
  --border-light: #E5E5E0;
  --border-hover: rgba(26, 26, 26, 0.22);
  --border-focus: var(--accent);

  /* ── Legacy Compat ── */
  --background-color: var(--bg);
  --surface-color:    var(--surface);
  --text-primary:     var(--fg);
  --text-secondary:   var(--fg-muted);
  --text-muted:       var(--fg-faint);
  --border-color:     var(--border);
  --primary-color:    var(--accent);
  --primary-hover:    var(--accent-hover);
  --primary-light:    var(--accent-light);
  --success-color:    var(--success);
  --error-color:      var(--error);
  --warning-color:    var(--warning);

  /* ── Typography ── */
  --font-serif:    'Playfair Display', Georgia, serif;
  --font-sans:     'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
  --font-primary:  var(--font-sans);
  --font-display:  var(--font-serif);

  /* ── Font Sizes ── */
  --text-2xs:  0.625rem;   /* 10px — mono labels */
  --text-xs:   0.6875rem;  /* 11px — metadata */
  --text-sm:   0.8125rem;  /* 13px — body small */
  --text-base: 0.9375rem;  /* 15px — body */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.5rem;     /* 40px */

  /* ── Spacing ── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Radius ── */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.10);

  /* ── Timing ── */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  150ms;
  --duration:       250ms;
  --duration-slow:  400ms;

  /* ── Transitions ── */
  --transition-fast:   all var(--duration-fast) var(--ease);
  --transition-normal: all var(--duration) var(--ease);
  --transition-slow:   all var(--duration-slow) var(--ease);

  /* ── Layout ── */
  --header-height:  40px;
  --sidebar-width:  240px;
  --max-width:      1400px;
  --content-width:  860px;

  /* ── Z-Index ── */
  --z-base:     1;
  --z-dropdown: 50;
  --z-sticky:   80;
  --z-header:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* =============================================================================
   DARK MODE
   ============================================================================= */

[data-theme="dark"] {
  --bg:          #111110;
  --bg-muted:    #1A1A18;
  --bg-elevated: #22221F;
  --surface:     #1A1A18;
  --fg:          #F2EFE8;
  --fg-muted:    #A8A298;
  --fg-faint:    #6B6860;
  --accent:      #F97316;
  --accent-hover:#FB923C;
  --accent-light:rgba(249, 115, 22, 0.10);
  --white:       #FFFFFF;

  --success:       #22C55E;
  --success-light: rgba(34, 197, 94, 0.10);
  --warning:       #EAB308;
  --warning-light: rgba(234, 179, 8, 0.10);
  --error:         #EF4444;
  --error-light:   rgba(239, 68, 68, 0.10);
  --info:          #3B82F6;
  --info-light:    rgba(59, 130, 246, 0.10);

  --border:       rgba(242, 239, 232, 0.08);
  --border-light: rgba(242, 239, 232, 0.04);
  --border-hover: rgba(242, 239, 232, 0.14);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.50);

  color-scheme: dark;
}