/**
 * Design Tokens
 * 
 * The foundation of the Setpoint design system.
 * All semantic values (colors, spacing, typography) live here.
 * Components reference these tokens - never hardcode values.
 */

/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ─────────────────────────────────────────────────────────
       SIGNAL COLORS - 5-Level Diverging Scale
       The core visual language. Only colors with semantic meaning.
       
       Cool colors (purple/teal) = under target ("cold" = not enough)
       Green = optimal (in range)
       Warm colors (gold/red) = over target ("hot" = too much)
       ───────────────────────────────────────────────────────── */
    
    /* Under range (cool tones) */
    --signal-under: #4A3380;           /* Deep purple - significantly under */
    --signal-under-slight: #56ABBD;    /* Teal - slightly under */
    
    /* Optimal */
    --signal-optimal: #317769;         /* Deep teal green - in range */
    
    /* Over range (warm tones) */
    --signal-over-slight: #D9B34A;     /* Mustard gold - slightly over */
    --signal-over: #B55A5A;            /* Dusty brick - significantly over */
    
    /* Background variants (lightened versions of primary colors) */
    --signal-under-bg: #EDEAF3;        /* Light purple */
    --signal-under-slight-bg: #E8F4F6; /* Light teal */
    --signal-optimal-bg: #E6F0EE;      /* Light green */
    --signal-over-slight-bg: #FBF8EC;  /* Light mustard */
    --signal-over-bg: #F5EBEB;         /* Light brick */
    
    /* Border variants (muted versions of primary colors) */
    --signal-under-border: #9B8AB8;    /* Purple border */
    --signal-under-slight-border: #9DCDD8; /* Teal border */
    --signal-optimal-border: #7EB3A8;  /* Green border */
    --signal-over-slight-border: #E8D07A; /* Mustard border */
    --signal-over-border: #D4A3A3;     /* Brick border */
    
    /* Legacy aliases (for backwards compatibility) */
    --signal-green: var(--signal-optimal);
    --signal-yellow: var(--signal-over-slight);
    --signal-red: var(--signal-over);
    --signal-green-bg: var(--signal-optimal-bg);
    --signal-yellow-bg: var(--signal-over-slight-bg);
    --signal-red-bg: var(--signal-over-bg);
    --signal-green-border: var(--signal-optimal-border);
    --signal-yellow-border: var(--signal-over-slight-border);
    --signal-red-border: var(--signal-over-border);
    
    /* ─────────────────────────────────────────────────────────
       NEUTRAL PALETTE
       Chrome, borders, text - everything non-semantic.
       ───────────────────────────────────────────────────────── */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    
    /* Semantic aliases */
    --text-primary: var(--gray-700);
    --text-secondary: var(--gray-600);
    --text-muted: #6b7280;
    --text-inverted: #f8fafc;
    
    --bg-page: #ffffff;
    --bg-muted: #fafafa;
    --bg-subtle: var(--gray-50);
    --bg-hover: var(--gray-100);
    
    --border-light: #e5e7eb;
    --border-default: var(--gray-200);
    --border-focus: #3b82f6;
    
    /* ─────────────────────────────────────────────────────────
       ACCENT COLORS
       Interactive elements, buttons, links.
       ───────────────────────────────────────────────────────── */
    --accent-primary: #3b82f6;
    --accent-primary-hover: #2563eb;
    --accent-primary-bg: #eff6ff;
    
    --accent-secondary: #6366f1;
    --accent-secondary-hover: #4f46e5;
    --accent-secondary-bg: #e0e7ff;
    
    --accent-dark: #1e40af;             /* Darker blue for active states */
    
    /* ─────────────────────────────────────────────────────────
       SIGNAL HOVER STATES
       Darker versions for interactive elements.
       ───────────────────────────────────────────────────────── */
    --signal-optimal-hover: #276B5A;    /* Darker optimal for button hover */
    --signal-over-hover: #9A4D4D;       /* Darker over for danger hover */
    
    /* ─────────────────────────────────────────────────────────
       UI STATUS COLORS
       For tool calls and other status indicators.
       Uses signal colors for visual consistency.
       ───────────────────────────────────────────────────────── */
    --status-pending: var(--signal-under-slight);
    --status-pending-bg: var(--signal-under-slight-bg);
    --status-pending-border: var(--signal-under-slight-border);
    
    --status-success: var(--signal-optimal);
    --status-success-bg: var(--signal-optimal-bg);
    --status-success-border: var(--signal-optimal-border);
    
    --status-fail: var(--signal-over);
    --status-fail-bg: var(--signal-over-bg);
    --status-fail-border: var(--signal-over-border);
    
    /* ─────────────────────────────────────────────────────────
       CODE BLOCK COLORS
       ───────────────────────────────────────────────────────── */
    --bg-code: var(--gray-800);
    --text-code: var(--gray-200);
    --border-code: var(--gray-700);
    
    /* ─────────────────────────────────────────────────────────
       SPACING SCALE
       Consistent spacing multiples (base = 4px).
       ───────────────────────────────────────────────────────── */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    
    /* ─────────────────────────────────────────────────────────
       TYPOGRAPHY
       ───────────────────────────────────────────────────────── */
    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Monaco, "Consolas", monospace;
    
    --text-xs: 0.6875rem;   /* 11px */
    --text-sm: 0.75rem;     /* 12px */
    --text-base: 0.8125rem; /* 13px - compact UI */
    --text-md: 0.875rem;    /* 14px */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.125rem;    /* 18px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* ─────────────────────────────────────────────────────────
       BORDERS & RADII
       ───────────────────────────────────────────────────────── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* ─────────────────────────────────────────────────────────
       SHADOWS
       ───────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    /* ─────────────────────────────────────────────────────────
       TRANSITIONS
       Quick and subtle, per UI guidelines.
       ───────────────────────────────────────────────────────── */
    --transition-fast: 0.1s ease;
    --transition-base: 0.15s ease;
    --transition-slow: 0.25s ease;
    
    /* ─────────────────────────────────────────────────────────
       Z-INDEX SCALE
       ───────────────────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    
    /* ─────────────────────────────────────────────────────────
       LAYOUT
       Container widths and nav height.
       ───────────────────────────────────────────────────────── */
    --container-sm: 640px;
    --container-md: 900px;
    --container-lg: 1200px;
    --nav-height: 64px;
}

/* ─────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container-lg);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container--sm {
    max-width: var(--container-sm);
}

.container--md {
    max-width: var(--container-md);
}