/**
 * Theme Configuration
 * Centralized design tokens for the Webbing application.
 *
 * Palette: warm navy + sage, tuned for faith-aligned finance.
 * Principles: soft over sharp, accessible (WCAG 2.1 AA), token-first.
 *
 * Customize the UI by editing theme-overrides.css (loaded after this file).
 */

:root {
    /* Primary Colors */
    --color-primary: #2c3e6b;
    --color-primary-hover: #1e2d50;
    --color-primary-light: #eef1f7;

    /* Secondary Colors */
    --color-secondary: #6b7280;
    --color-secondary-hover: #4b5563;

    /* Accent */
    --color-accent: #5a8a6a;
    --color-accent-hover: #487558;

    /* Status Colors */
    --color-success: #5b8c5a;
    --color-success-bg: #e8f0e8;
    --color-success-text: #2d5a2d;

    --color-warning: #c4952a;
    --color-warning-bg: #fdf4e0;
    --color-warning-text: #7a5b12;

    --color-error: #c4564a;
    --color-error-bg: #fce8e6;
    --color-error-text: #7a2e28;

    --color-danger: #b94a3e;
    --color-danger-hover: #993d33;

    --color-info: #4a8fa8;
    --color-info-bg: #e4f0f5;
    --color-info-text: #2a5f73;

    /* Neutral Colors */
    --color-bg-primary: #ffffff;
    --color-bg-app: #fafaf8;
    --color-bg-graph-view: #eeedea;
    --color-bg-secondary: #f5f4f1;
    --color-bg-tertiary: #f0efec;
    --color-bg-quaternary: #e6e5e1;

    --color-text-primary: #2d2a26;
    --color-text-secondary: #5c584f;
    --color-text-tertiary: #8a867d;
    --color-text-inverse: #ffffff;

    /* Alias tokens referenced in component CSS */
    --color-bg: var(--color-bg-primary);
    --color-bg-hover: var(--color-bg-tertiary);
    --color-text: var(--color-text-primary);
    --color-text-muted: var(--color-text-tertiary);

    --color-border: #ddd9d1;
    --color-border-light: #e8e6e0;

    /* Terminal Colors */
    --color-terminal-bg: #22201e;
    --color-terminal-header: #302e2b;
    --color-terminal-border: #433f3a;
    --color-terminal-text: #d4d0c8;
    --color-terminal-text-muted: #b8b4ac;

    /* Shadows -- tinted to primary for warmth */
    --shadow-sm: 0 1px 3px rgba(44, 62, 107, 0.06), 0 1px 2px rgba(44, 62, 107, 0.04);
    --shadow-md: 0 4px 8px rgba(44, 62, 107, 0.07), 0 2px 4px rgba(44, 62, 107, 0.04);

    /* Border Radius -- softer corners */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 20px;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;

    /* Typography */
    --font-family-system: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Courier New', monospace;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13.5px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 23px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Transitions */
    --transition-fast: 0.2s ease-out;
    --transition-base: 0.3s ease-out;
}