/* ClariSpec Design Tokens */
:root {
    /* Colors — Primary */
    --cs-primary: #068162;
    --cs-primary-light: #0a9e78;
    --cs-primary-dark: #056b51;
    --cs-accent: #2dd4a8;

    /* Colors — Background */
    --cs-bg: #050a05;
    --cs-bg2: #0a100a;
    --cs-card: #0e150e;
    --cs-border: #1a2e1a;

    /* Colors — Text */
    --cs-text: #e4ede4;
    --cs-muted: #8fa88f;

    /* Colors — Semantic */
    --cs-error: #f87171;
    --cs-warning: #facc15;
    --cs-success: #4ade80;
    --cs-info: #60a5fa;

    /* Spacing */
    --cs-space-xs: 0.25rem;
    --cs-space-sm: 0.5rem;
    --cs-space-md: 1rem;
    --cs-space-lg: 1.5rem;
    --cs-space-xl: 2rem;
    --cs-space-2xl: 3rem;

    /* Border radius */
    --cs-radius-sm: 4px;
    --cs-radius-md: 8px;
    --cs-radius-lg: 12px;
    --cs-radius-xl: 16px;
    --cs-radius-full: 9999px;

    /* Typography */
    --cs-font: 'Inter', system-ui, -apple-system, sans-serif;
    --cs-font-mono: 'Courier New', monospace;
    --cs-text-xs: 0.72rem;
    --cs-text-sm: 0.82rem;
    --cs-text-base: 0.9rem;
    --cs-text-lg: 1.05rem;
    --cs-text-xl: 1.3rem;
    --cs-text-2xl: 1.6rem;

    /* Shadows */
    --cs-shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --cs-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --cs-shadow-lg: 0 8px 32px rgba(0,0,0,0.4);

    /* Transitions */
    --cs-transition-fast: 0.15s ease;
    --cs-transition-normal: 0.25s ease;
}

/* Light theme overrides */
[data-theme="light"] {
    --cs-bg: #f8faf8;
    --cs-bg2: #f0f4f0;
    --cs-card: #ffffff;
    --cs-border: #d4ddd4;
    --cs-text: #1a2e1a;
    --cs-muted: #4a5e4a;
}