/*
 * TrimCI Design Tokens
 * Auto-generated from Pencil design system (Lunaris)
 * Supports light/dark mode via [data-theme] attribute
 */

/* ── Light Theme (default) — matches PipelineIQ screenshots ── */
:root,
[data-theme="light"] {
    /* Core */
    --background: #F7F8FA;
    --foreground: #1A1A2E;
    --card: #FFFFFF;
    --card-foreground: #1A1A2E;
    --popover: #FFFFFF;
    --popover-foreground: #1A1A2E;

    /* Brand */
    --primary: #6C5CE7;
    --primary-foreground: #FFFFFF;
    --secondary: #F1F1F4;
    --secondary-foreground: #1A1A2E;
    --accent: #F7F8FA;
    --accent-foreground: #1A1A2E;

    /* Semantic */
    --destructive: #DC2626;
    --muted: #F1F1F4;
    --muted-foreground: #6B7280;

    /* Borders & Inputs */
    --border: #E5E7EB;
    --input: #E5E7EB;
    --ring: #6C5CE7;

    /* Sidebar */
    --sidebar: #FFFFFF;
    --sidebar-foreground: #6B7280;
    --sidebar-accent: #F0EEFF;
    --sidebar-accent-foreground: #1A1A2E;
    --sidebar-border: #E5E7EB;
    --sidebar-primary: #6C5CE7;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-ring: #6C5CE7;

    /* Status */
    --color-success: #ECFDF5;
    --color-success-foreground: #16A34A;
    --color-warning: #FFF7ED;
    --color-warning-foreground: #EA580C;
    --color-error: #FEF2F2;
    --color-error-foreground: #DC2626;
    --color-info: #EEF2FF;
    --color-info-foreground: #4F46E5;

    /* Static */
    --black: #000000;
    --white: #FFFFFF;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
    /* Core */
    --background: #111111;
    --foreground: #FFFFFF;
    --card: #1A1A1A;
    --card-foreground: #FFFFFF;
    --popover: #1A1A1A;
    --popover-foreground: #FFFFFF;

    /* Brand */
    --primary: #A29BFE;
    --primary-foreground: #FFFFFF;
    --secondary: #2E2E2E;
    --secondary-foreground: #FFFFFF;
    --accent: #111111;
    --accent-foreground: #F2F3F0;

    /* Semantic */
    --destructive: #FF5C33;
    --muted: #2E2E2E;
    --muted-foreground: #B8B9B6;

    /* Borders & Inputs */
    --border: #2E2E2E;
    --input: #2E2E2E;
    --ring: #666666;

    /* Sidebar */
    --sidebar: #18181b;
    --sidebar-foreground: #fafafa;
    --sidebar-accent: #2a2a30;
    --sidebar-accent-foreground: #fafafa;
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-primary: #18181b;
    --sidebar-primary-foreground: #fafafa;
    --sidebar-ring: #71717a;

    /* Status */
    --color-success: #222924;
    --color-success-foreground: #B6FFCE;
    --color-warning: #291C0F;
    --color-warning-foreground: #FF8400;
    --color-error: #24100B;
    --color-error-foreground: #FF5C33;
    --color-info: #222229;
    --color-info-foreground: #B2B2FF;
}

/* ── Typography ── */
:root {
    --font-primary: 'JetBrains Mono', monospace;
    --font-secondary: 'Geist', 'Inter', system-ui, sans-serif;

    /* Font sizes */
    --text-xs: 0.6875rem;   /* 11px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.875rem;  /* 14px */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.125rem;    /* 18px */
    --text-2xl: 1.25rem;    /* 20px */
    --text-3xl: 1.5rem;     /* 24px */
    --text-4xl: 1.75rem;    /* 28px */
    --text-5xl: 2.25rem;    /* 36px */
}

/* ── Spacing ── */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
}

/* ── Border Radius ── */
:root {
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
}

/* ── Shadows ── */
:root {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 1px 1.75px rgba(0, 0, 0, 0.05);
}

/* ── Transitions ── */
:root {
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
}

/* ── Sidebar dimensions ── */
:root {
    --sidebar-width: 280px;
}