/* CloudVerse AIx — design tokens.
   Extracted from Veehaan's prototype (client/src/index.css). Source of truth for the look.
   Layer 1: raw palette ramps.  Layer 2: semantic tokens components consume.
   CDx adds nothing to this file. */

:root {
  /* ── Layer 1: ramps ── */
  --violet-50:  rgba(139, 92, 246, 0.06);
  --violet-100: rgba(139, 92, 246, 0.10);
  --violet-200: rgba(139, 92, 246, 0.16);
  --violet-300: rgba(139, 92, 246, 0.25);
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;

  --green-100: rgba(34, 197, 94, 0.08);
  --green-200: rgba(34, 197, 94, 0.18);
  --green-400: #86efac;
  --green-500: #22c55e;

  --amber-100: rgba(245, 158, 11, 0.08);
  --amber-200: rgba(245, 158, 11, 0.18);
  --amber-400: #fcd34d;
  --amber-500: #f59e0b;

  --red-100: rgba(239, 68, 68, 0.08);
  --red-200: rgba(239, 68, 68, 0.18);
  --red-400: #fca5a5;
  --red-500: #ef4444;

  --blue-100: rgba(59, 130, 246, 0.08);
  --blue-200: rgba(59, 130, 246, 0.18);
  --blue-400: #93c5fd;
  --blue-500: #3b82f6;

  /* Neutral alpha (Vercel border pattern) */
  --white-4:  rgba(255, 255, 255, 0.04);
  --white-6:  rgba(255, 255, 255, 0.06);
  --white-8:  rgba(255, 255, 255, 0.08);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-18: rgba(255, 255, 255, 0.18);

  /* ── Layer 2: semantic (Apple — purpose over palette) ── */
  --aix-bg:             #000000;
  --aix-bg-subtle:      #080808;
  --aix-surface:        #0e0e0e;
  --aix-surface-raised: #141414;
  --aix-overlay:        #1c1c1c;
  --aix-backdrop:       rgba(0, 0, 0, 0.60);

  --aix-border:         var(--white-8);
  --aix-border-strong:  var(--white-12);
  --aix-border-focus:   var(--violet-500);

  --aix-text:           #ededed;
  --aix-text-secondary: #a1a1a1;
  --aix-text-tertiary:  #6e6e6e;
  --aix-text-disabled:  #3e3e3e;

  --aix-primary:        var(--violet-500);
  --aix-primary-hover:  var(--violet-600);
  --aix-primary-bg:     var(--violet-100);
  --aix-primary-border: var(--violet-300);
  --aix-primary-text:   var(--violet-400);

  --aix-accent-bg:          var(--aix-primary-bg);
  --aix-accent-solid:       var(--violet-600);
  --aix-accent-solid-hover: var(--violet-700);

  --aix-success:        var(--green-500);
  --aix-success-bg:     var(--green-100);
  --aix-success-border: var(--green-200);
  --aix-success-text:   var(--green-400);

  --aix-warning:        var(--amber-500);
  --aix-warning-bg:     var(--amber-100);
  --aix-warning-border: var(--amber-200);
  --aix-warning-text:   var(--amber-400);

  --aix-danger:         var(--red-500);
  --aix-danger-bg:      var(--red-100);
  --aix-danger-border:  var(--red-200);
  --aix-danger-text:    var(--red-400);

  --aix-info-bg:        var(--blue-100);
  --aix-info-border:    var(--blue-200);
  --aix-info-text:      var(--blue-400);

  --aix-agent-bg:     var(--white-6);
  --aix-agent-border: var(--aix-border-strong);
  --aix-agent-text:   var(--aix-text-tertiary);

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

  /* Type scale (Apple ratio, each step ×1.2) */
  --aix-text-2xs: 10px;
  --aix-text-xs:  11px;
  --aix-text-sm:  12px;
  --aix-text-md:  13px;
  --aix-text-lg:  14px;
  --aix-text-xl:  16px;
  --aix-text-2xl: 20px;
  --aix-text-3xl: 24px;
  --aix-text-4xl: 32px;

  /* Two meaningful weight stops (Linear discipline) */
  --aix-weight-normal: 400;
  --aix-weight-medium: 500;
  --aix-weight-bold:   600;

  /* Radius — sharp (Linear / Vercel) */
  --aix-radius-xs: 2px;
  --aix-radius-sm: 4px;
  --aix-radius-md: 6px;
  --aix-radius-lg: 8px;

  /* Row heights — Raycast density */
  --aix-row-xs: 28px;
  --aix-row-sm: 32px;
  --aix-row-md: 40px;
  --aix-row-lg: 44px;

  /* Layout */
  --aix-sidebar-w: 200px;
  --aix-topbar-h:  44px;

  /* Spacing — 4px base grid */
  --aix-space-1: 4px;
  --aix-space-2: 8px;
  --aix-space-3: 12px;
  --aix-space-4: 16px;
  --aix-space-5: 20px;
  --aix-space-6: 24px;

  --aix-transition: 120ms ease;
}

/* ══ DARK — cool-charcoal canvas, not pure black.
   Text hierarchy retuned: the DS ships pure-black values that read too dim here. ══ */
.aix-shell[data-theme="dark"] {
  --aix-bg: #0b0c0e;
  --aix-bg-subtle: #101216;
  --aix-surface: #16181c;
  --aix-surface-raised: #1d2025;
  --aix-overlay: #23262c;
  --aix-border: rgba(255,255,255,0.10);
  --aix-border-strong: rgba(255,255,255,0.17);

  --aix-text: #f3f4f6;            /* ~15:1 */
  --aix-text-secondary: #bcbfc7;  /* ~8.4:1 */
  --aix-text-tertiary: #8d919b;   /* ~5.2:1 — passes normal-size text */
  --aix-text-disabled: #565a63;

  --white-4: rgba(255,255,255,0.05);
  --white-6: rgba(255,255,255,0.07);
  --white-8: rgba(255,255,255,0.10);

  /* Violet lifted so it pops off charcoal */
  --aix-primary: #9b7cf0;
  --aix-primary-text: #b7a1f7;
  --aix-primary-bg: rgba(139,92,246,0.14);
  --aix-primary-border: rgba(139,92,246,0.34);
  --aix-accent-bg: rgba(139,92,246,0.16);
  --violet-200: rgba(139,92,246,0.13);
  --violet-300: rgba(139,92,246,0.30);

  /* Status text lifted for legibility on dark surfaces */
  --aix-success-text: #63d391;
  --aix-warning-text: #f0bd57;
  --aix-danger-text: #f28b82;
  --aix-info-text: #8fb8fb;
}

.aix-shell { --aix-font-display: 'Space Grotesk', var(--aix-font); }

/* ══ LIGHT — cool-neutral sibling of dark. Same violet brand, only the lighting flips. ══ */
.aix-shell[data-theme="light"] {
  --aix-bg: #f6f7f9;
  --aix-bg-subtle: #eef0f3;
  --aix-surface: #ffffff;
  --aix-surface-raised: #ffffff;
  --aix-overlay: #ffffff;
  --aix-backdrop: rgba(17,20,26,0.36);

  --aix-text: #0f1115;            /* ~17:1 */
  --aix-text-secondary: #474d57;  /* ~8.7:1 */
  --aix-text-tertiary: #6b727d;   /* ~4.9:1 */
  --aix-text-disabled: #a6acb6;

  --aix-border: rgba(17,24,39,0.09);
  --aix-border-strong: rgba(17,24,39,0.15);
  --aix-border-focus: var(--violet-500);

  /* hover/press washes: dark-ink alpha on light, mirror of white-alpha on dark */
  --white-4: rgba(17,24,39,0.035);
  --white-6: rgba(17,24,39,0.05);
  --white-8: rgba(17,24,39,0.065);
  --white-12: rgba(17,24,39,0.10);

  --aix-primary: var(--violet-600);
  --aix-primary-text: var(--violet-700);   /* AA on white */
  --aix-primary-bg: #f1ecfd;
  --aix-primary-border: #ddd0fb;
  --aix-accent-bg: #ede6fc;
  --aix-accent-solid: var(--violet-600);
  --aix-accent-solid-hover: var(--violet-700);
  --violet-200: #f3eefe;
  --violet-300: #e0d4fb;

  --aix-success: #16a34a; --aix-success-text: #15803d;
  --aix-success-bg: #e9f6ec; --aix-success-border: #c1e4c8;
  --aix-warning: #d97706; --aix-warning-text: #b45309;
  --aix-warning-bg: #fbf1dd; --aix-warning-border: #f0d7a0;
  --aix-danger: #dc2626; --aix-danger-text: #c2261d;
  --aix-danger-bg: #fbe7e5; --aix-danger-border: #f2c6c1;
  --aix-info-bg: #e8f0fd; --aix-info-border: #c5d8f8; --aix-info-text: #1d4ed8;

  --aix-agent-bg: rgba(17,24,39,0.04);
  --aix-agent-border: rgba(17,24,39,0.13);
  --aix-agent-text: #474d57;
}