/* Module: 00-theme-colors.css */
/* Scope: Centralized color tokens used across the UI. */

:root {
    /* EMA reference palette */
    --palette-ema-primary: #4f46e5;
    --palette-ema-primary-dark: #312e81;
    --palette-ema-primary-light: #a5b4fc;
    --palette-ema-primary-hover: #4338ca;

    --palette-ema-dark: #312e81;
    --palette-ema-gray: #64748b;
    --palette-ema-light: #e0e7ff;
    --palette-ema-white: #ffffff;
    --palette-ema-shadow: var(--theme-primary-18);

    --palette-ema-text-primary: #0f172a;
    --palette-ema-text-secondary: #64748b;
    --palette-ema-border: #c2cad6;
    --palette-ema-text-invert: #f8fafc;

    --theme-success: #16a34a;
    --theme-success-soft: color-mix(in srgb, var(--theme-success) 34%, transparent);
    --theme-warning: #ffb347;
    --theme-warning-soft: color-mix(in srgb, var(--theme-warning) 20%, transparent);
    --theme-danger: #dc2626;
    --theme-danger-soft: color-mix(in srgb, var(--theme-danger) 50%, transparent);

    --theme-white-98: color-mix(in srgb, var(--palette-ema-light) 98%, transparent);
    --theme-white-96: color-mix(in srgb, var(--palette-ema-light) 96%, transparent);
    --theme-white-95: color-mix(in srgb, var(--palette-ema-light) 95%, transparent);
    --theme-white-94: color-mix(in srgb, var(--palette-ema-light) 94%, transparent);
    --theme-white-92: color-mix(in srgb, var(--palette-ema-light) 92%, transparent);
    --theme-white-90: color-mix(in srgb, var(--palette-ema-light) 90%, transparent);
    --theme-white-88: color-mix(in srgb, var(--palette-ema-light) 88%, transparent);
    --theme-white-85: color-mix(in srgb, var(--palette-ema-light) 85%, transparent);
    --theme-white-82: color-mix(in srgb, var(--palette-ema-light) 82%, transparent);
    --theme-white-80: color-mix(in srgb, var(--palette-ema-light) 80%, transparent);
    --theme-white-78: color-mix(in srgb, var(--palette-ema-light) 78%, transparent);
    --theme-white-72: color-mix(in srgb, var(--palette-ema-light) 72%, transparent);
    --theme-white-70: color-mix(in srgb, var(--palette-ema-light) 70%, transparent);
    --theme-white-68: color-mix(in srgb, var(--palette-ema-light) 68%, transparent);
    --theme-white-66: color-mix(in srgb, var(--palette-ema-light) 66%, transparent);
    --theme-white-65: color-mix(in srgb, var(--palette-ema-light) 65%, transparent);
    --theme-white-62: color-mix(in srgb, var(--palette-ema-light) 62%, transparent);
    --theme-white-60: color-mix(in srgb, var(--palette-ema-light) 60%, transparent);
    --theme-white-58: color-mix(in srgb, var(--palette-ema-light) 58%, transparent);
    --theme-white-54: color-mix(in srgb, var(--palette-ema-light) 54%, transparent);
    --theme-white-50: color-mix(in srgb, var(--palette-ema-light) 50%, transparent);
    --theme-white-48: color-mix(in srgb, var(--palette-ema-light) 48%, transparent);
    --theme-white-45: color-mix(in srgb, var(--palette-ema-light) 45%, transparent);
    --theme-white-44: color-mix(in srgb, var(--palette-ema-light) 44%, transparent);
    --theme-white-40: color-mix(in srgb, var(--palette-ema-light) 40%, transparent);
    --theme-white-38: color-mix(in srgb, var(--palette-ema-light) 38%, transparent);
    --theme-white-36: color-mix(in srgb, var(--palette-ema-light) 36%, transparent);
    --theme-white-35: color-mix(in srgb, var(--palette-ema-light) 35%, transparent);
    --theme-white-34: color-mix(in srgb, var(--palette-ema-light) 34%, transparent);
    --theme-white-32: color-mix(in srgb, var(--palette-ema-light) 32%, transparent);
    --theme-white-30: color-mix(in srgb, var(--palette-ema-light) 30%, transparent);
    --theme-white-26: color-mix(in srgb, var(--palette-ema-light) 26%, transparent);
    --theme-white-24: color-mix(in srgb, var(--palette-ema-light) 24%, transparent);
    --theme-white-22: color-mix(in srgb, var(--palette-ema-light) 22%, transparent);
    --theme-white-20: color-mix(in srgb, var(--palette-ema-light) 20%, transparent);
    --theme-white-18: color-mix(in srgb, var(--palette-ema-light) 18%, transparent);
    --theme-white-16: color-mix(in srgb, var(--palette-ema-light) 16%, transparent);
    --theme-white-15: color-mix(in srgb, var(--palette-ema-light) 15%, transparent);
    --theme-white-14: color-mix(in srgb, var(--palette-ema-light) 14%, transparent);
    --theme-white-12: color-mix(in srgb, var(--palette-ema-light) 12%, transparent);
    --theme-white-10: color-mix(in srgb, var(--palette-ema-light) 10%, transparent);
    --theme-white-8: color-mix(in srgb, var(--palette-ema-light) 8%, transparent);
    --theme-white-6: color-mix(in srgb, var(--palette-ema-light) 6%, transparent);
    --theme-white-4: color-mix(in srgb, var(--palette-ema-light) 4%, transparent);
    --theme-white-3: color-mix(in srgb, var(--palette-ema-light) 3%, transparent);
    --theme-dark-34: color-mix(in srgb, var(--palette-ema-dark) 34%, transparent);
    --theme-dark-30: color-mix(in srgb, var(--palette-ema-dark) 30%, transparent);
    --theme-dark-28: color-mix(in srgb, var(--palette-ema-dark) 28%, transparent);
    --theme-dark-26: color-mix(in srgb, var(--palette-ema-dark) 26%, transparent);
    --theme-dark-24: color-mix(in srgb, var(--palette-ema-dark) 24%, transparent);
    --theme-dark-18: color-mix(in srgb, var(--palette-ema-dark) 18%, transparent);
    --theme-dark-16: color-mix(in srgb, var(--palette-ema-dark) 16%, transparent);
    --theme-dark-14: color-mix(in srgb, var(--palette-ema-dark) 14%, transparent);
    --theme-dark-12: color-mix(in srgb, var(--palette-ema-dark) 12%, transparent);
    --theme-dark-8: color-mix(in srgb, var(--palette-ema-dark) 8%, transparent);
    --theme-dark-6: color-mix(in srgb, var(--palette-ema-dark) 6%, transparent);
    --theme-dark-5: color-mix(in srgb, var(--palette-ema-dark) 5%, transparent);
    --theme-dark-4: color-mix(in srgb, var(--palette-ema-dark) 4%, transparent);
    --theme-dark-3: color-mix(in srgb, var(--palette-ema-dark) 3%, transparent);
    --theme-primary-85: color-mix(in srgb, var(--palette-ema-primary) 85%, transparent);
    --theme-primary-35: color-mix(in srgb, var(--palette-ema-primary) 35%, transparent);
    --theme-primary-34: color-mix(in srgb, var(--palette-ema-primary) 34%, transparent);
    --theme-primary-30: color-mix(in srgb, var(--palette-ema-primary) 30%, transparent);
    --theme-primary-28: color-mix(in srgb, var(--palette-ema-primary) 28%, transparent);
    --theme-primary-24: color-mix(in srgb, var(--palette-ema-primary) 24%, transparent);
    --theme-primary-22: color-mix(in srgb, var(--palette-ema-primary) 22%, transparent);
    --theme-primary-20: color-mix(in srgb, var(--palette-ema-primary) 20%, transparent);
    --theme-primary-18: color-mix(in srgb, var(--palette-ema-primary) 18%, transparent);
    --theme-primary-16: color-mix(in srgb, var(--palette-ema-primary) 16%, transparent);
    --theme-primary-15: color-mix(in srgb, var(--palette-ema-primary) 15%, transparent);
    --theme-primary-14: color-mix(in srgb, var(--palette-ema-primary) 14%, transparent);
    --theme-primary-12: color-mix(in srgb, var(--palette-ema-primary) 12%, transparent);
    --theme-primary-10: color-mix(in srgb, var(--palette-ema-primary) 10%, transparent);
    --theme-primary-8: color-mix(in srgb, var(--palette-ema-primary) 8%, transparent);
    --theme-primary-6: color-mix(in srgb, var(--palette-ema-primary) 6%, transparent);
    --theme-success-12: color-mix(in srgb, var(--palette-ema-success) 12%, transparent);
    --theme-success-8: color-mix(in srgb, var(--palette-ema-success) 8%, transparent);
    --theme-surface-card-78: color-mix(in srgb, var(--theme-bg-surface) 78%, transparent);
    --theme-surface-card-70: color-mix(in srgb, var(--theme-bg-surface) 70%, transparent);


    /* Semantic theme tokens */
    --theme-primary: var(--palette-ema-primary);
    --theme-primary-hover: var(--palette-ema-primary-hover);
    --theme-primary-active: var(--palette-ema-primary-dark);
    --theme-primary-soft: var(--palette-ema-primary-light);
    --theme-primary-strong: var(--palette-ema-primary-dark);
    --theme-accent-info: var(--palette-ema-primary);
    --theme-accent-info-text: var(--palette-ema-primary);
    --theme-accent-info-border: var(--palette-ema-primary);
    --theme-accent-primary-border: var(--palette-ema-primary-hover);
    --theme-accent-primary-border-strong: var(--palette-ema-primary-hover);
    --theme-brand-start: var(--palette-ema-primary);
    --theme-brand-end: var(--palette-ema-primary);
    --theme-brand-complement-soft: var(--palette-ema-primary-light);


    --theme-accent-warning-border: var(--theme-warning-soft);
    --theme-accent-danger-text: var(--theme-danger-soft);
    --theme-accent-danger-border: var(--theme-danger-soft);
    --theme-accent-success-border: var(--palette-ema-success);
    --theme-surface-success: var(--palette-ema-success);


    --theme-bg-app: var(--palette-ema-white);
    --theme-bg-surface: var(--palette-ema-white);
    --theme-bg-surface-soft: var(--palette-ema-white);

    --theme-surface-card: var(--palette-ema-white);
    --theme-surface-primary: var(--palette-ema-white);
    --theme-surface-primary-muted: var(--palette-ema-white);
    --theme-surface-muted: var(--palette-ema-white);
    --theme-surface-warning: var(--palette-ema-white);
    --theme-surface-danger: var(--palette-ema-white);
    --theme-surface-danger-muted: var(--palette-ema-white);
    --theme-text-inverse: var(--palette-ema-text-invert);
    --theme-highlight-soft: var(--palette-ema-white);

    --theme-dark: var(--palette-ema-dark);
    --theme-light: var(--palette-ema-light);
    --theme-shadow: var(--palette-ema-shadow);
    --theme-text-primary: var(--palette-ema-text-primary);
    --theme-text-default: var(--palette-ema-text-primary);
    --theme-bg-overlay: var(--palette-ema-text-primary);

    --theme-text-secondary: var(--palette-ema-text-secondary);
    --theme-text-muted: var(--palette-ema-text-secondary);
    --theme-text-faint: var(--palette-ema-text-secondary);

    --theme-border-default: var(--palette-ema-border);
    --theme-border-strong: var(--palette-ema-border);
    --theme-border-soft: var(--palette-ema-border);
    --theme-border-input: var(--palette-ema-border);

    --theme-shadow-soft: var(--palette-ema-shadow);
    --theme-shadow-medium: var(--palette-ema-shadow);
    --theme-shadow-primary-soft: var(--palette-ema-shadow);
    --theme-shadow-neutral-soft: var(--palette-ema-shadow);
    --theme-shadow-neutral: var(--palette-ema-shadow);
    --theme-shadow-neutral-strong: var(--palette-ema-shadow);






}