/* ==========================================================================
   SIBLE DESIGN SYSTEM — Design Tokens (vars.css)
   All colour, typography, spacing, and layout variables.
   Light theme defaults + Catppuccin Mocha dark overrides.
   ========================================================================== */

:root {
    /* --- GLOBAL VARIABLES (Geist Light) --- */
    --ds-background-100: #ffffff;
    --ds-background-200: #fafafa;
    --ds-gray-100: #f5f5f5;
    --ds-gray-200: #eaeaea;
    --ds-gray-alpha-400: rgba(0, 0, 0, 0.05);

    /* Text Colors */
    --ds-gray-1000: #000000;
    --ds-gray-900: #171717;
    --ds-gray-600: #666666;

    /* Semantic Mappings */
    --surface-primary: var(--ds-background-100);
    --surface-secondary: var(--ds-background-200);
    --border-subtle: var(--ds-gray-200);
    --text-primary: var(--ds-gray-1000);
    --text-secondary: var(--ds-gray-900);
    --text-muted: var(--ds-gray-600);

    /* Sible Identity (Status) */
    --status-success: #10b981;
    --status-error: #ee0000;
    --status-warning: #f5a623;
    --sible-success: var(--status-success);
    --sible-error: var(--status-error);
    --sible-warning: var(--status-warning);

    /* Pico Overrides */
    --pico-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --pico-background-color: var(--surface-primary);
    --pico-color: var(--text-primary);
    --pico-border-radius: 6px;
    --pico-form-element-border-color: var(--border-subtle);
    --pico-form-element-background-color: var(--surface-secondary);
    --pico-form-element-active-background-color: var(--surface-primary);
    --pico-primary: var(--ds-gray-1000);
    --pico-primary-hover: #333;
    --pico-primary-inverse: #ffffff;
    --pico-primary-background: var(--text-primary);
    --pico-primary-border: var(--text-primary);
    --pico-primary-hover-background: #333;
    --pico-primary-inverse: #ffffff;
    --pico-primary-focus: rgba(0, 0, 0, 0.05);
    --pico-selection-background: rgba(0, 0, 0, 0.1);
    --pico-selection-color: inherit;
    --pico-muted-color: var(--text-muted);
    --pico-line-height: 1.5;
    --pico-font-size: 100%;

    /* Layout Tokens */
    --sidebar-width: 250px;
    --header-height: 64px;
    --spacing-md: 24px;
}

/* --- Dark Theme (Catppuccin Mocha) --- */
[data-theme='dark'] {
    /* Mocha Palette Refined Overrides */
    --ds-background-100: #1e1e2e;
    --ds-background-200: #181825;
    --ds-gray-100: #11111b;
    --ds-gray-200: #313244;
    --ds-gray-alpha-400: rgba(255, 255, 255, 0.05);

    --ds-gray-1000: #cdd6f4;
    --ds-gray-900: #bac2de;
    --ds-gray-600: #7f849c;

    /* Semantic Overrides */
    --surface-primary: var(--ds-background-100);
    --surface-secondary: var(--ds-background-200);
    --border-subtle: var(--ds-gray-200);
    --text-primary: var(--ds-gray-1000);
    --text-secondary: var(--ds-gray-900);
    --text-muted: var(--ds-gray-600);

    /* Pico Overrides */
    --pico-background-color: var(--surface-primary);
    --pico-card-background-color: var(--surface-secondary);
    --pico-form-element-background-color: var(--ds-gray-100);
    --pico-color: var(--text-primary);
    --pico-h1-color: #f5c2e7;
    --pico-h2-color: #f5c2e7;
    --pico-h3-color: #f5c2e7;
    --pico-muted-color: var(--text-muted);
    --pico-primary: #b4befe;
    --pico-primary-hover: #89b4fa;
    --pico-primary-inverse: #11111b;
    --pico-border-color: var(--border-subtle);
    --pico-form-element-border-color: var(--border-subtle);
    --pico-form-element-active-border-color: #b4befe;

    /* Status Overrides */
    --status-success: #a6e3a1;
    --status-error: #f38ba8;
    --status-changed: #fab387;
    --sible-success: var(--status-success);
    --sible-error: var(--status-error);
    --sible-warning: var(--status-changed);
}