/* ============================================================
   ControlPlan Design System
   variables.css
   Source of truth for brand, semantic and component design tokens.
   ============================================================ */

:root {
    /* 1. Core brand colors */
    --cp-navy-900: #0C1626; /* sidebar, footer, dark hero, strongest headings */
    --cp-navy-800: #152338; /* dark hover surfaces and secondary dark panels */
    --cp-ink: #1A2534;      /* primary body copy and headings */
    --cp-slate: #637184;    /* secondary copy, labels and metadata */
    --cp-cyan: #21BED3;     /* brand highlight, active navigation and links */
    --cp-blue: #2A65FF;     /* primary actions and selected states */
    --cp-green: #2CAD71;    /* success / implemented / approved */
    --cp-amber: #F1A937;    /* warning / partial / expiring */
    --cp-purple: #8763FF;   /* framework/profile differentiation */
    --cp-bg: #F5F7FB;       /* application background */
    --cp-muted: #AAB4C2;    /* disabled / muted */
    --cp-border: #BECCDE;   /* borders and dividers */
    --cp-white: #FFFFFF;    /* surface and inverse text */

    /* 2. Semantic backgrounds */
    --cp-bg-page: var(--cp-bg);
    --cp-bg-surface: var(--cp-white);
    --cp-bg-sidebar: var(--cp-navy-900);
    --cp-bg-sidebar-hover: var(--cp-navy-800);
    --cp-bg-header: var(--cp-white);
    --cp-bg-dark: var(--cp-navy-900);
    --cp-bg-muted: #EEF2F7;
    --cp-bg-selected: #EAF0FF;
    --cp-bg-info: #EAFBFD;
    --cp-bg-success: #EAF8F1;
    --cp-bg-warning: #FFF7E8;
    --cp-bg-danger: #FDEEEE;

    /* 3. Text */
    --cp-text-primary: var(--cp-ink);
    --cp-text-heading: var(--cp-navy-900);
    --cp-text-secondary: var(--cp-slate);
    --cp-text-muted: var(--cp-muted);
    --cp-text-inverse: var(--cp-white);
    --cp-text-link: var(--cp-blue);
    --cp-text-link-hover: #1F51D9;

    /* 4. Actions */
    --cp-action-primary: var(--cp-blue);
    --cp-action-primary-hover: #1F51D9;
    --cp-action-secondary: var(--cp-cyan);
    --cp-action-secondary-hover: #189CAF;
    --cp-action-disabled: var(--cp-muted);

    /* 5. Status */
    --cp-status-success: var(--cp-green);
    --cp-status-warning: var(--cp-amber);
    --cp-status-info: var(--cp-blue);
    --cp-status-special: var(--cp-purple);
    --cp-status-danger: #E5484D;
    --cp-status-neutral: var(--cp-slate);

    /* 6. Control state */
    --cp-control-implemented: var(--cp-green);
    --cp-control-in-progress: var(--cp-amber);
    --cp-control-not-started: var(--cp-slate);
    --cp-control-not-applicable: var(--cp-muted);
    --cp-control-failed: var(--cp-status-danger);

    /* 7. Risk severity */
    --cp-risk-low: var(--cp-green);
    --cp-risk-medium: var(--cp-amber);
    --cp-risk-high: #F0783C;
    --cp-risk-critical: #D9363E;

    /* 8. Evidence state */
    --cp-evidence-approved: var(--cp-green);
    --cp-evidence-pending: var(--cp-amber);
    --cp-evidence-draft: var(--cp-slate);
    --cp-evidence-rejected: var(--cp-status-danger);
    --cp-evidence-expired: #D97706;

    /* 9. Audit state */
    --cp-audit-planned: var(--cp-purple);
    --cp-audit-active: var(--cp-blue);
    --cp-audit-review: var(--cp-amber);
    --cp-audit-complete: var(--cp-green);

    /* 10. Forms */
    --cp-input-bg: var(--cp-white);
    --cp-input-border: var(--cp-border);
    --cp-input-border-hover: var(--cp-slate);
    --cp-input-border-focus: var(--cp-blue);
    --cp-input-text: var(--cp-ink);
    --cp-input-placeholder: var(--cp-muted);
    --cp-input-disabled-bg: #EEF2F7;

    /* 11. Tables */
    --cp-table-bg: var(--cp-white);
    --cp-table-header-bg: #EEF2F7;
    --cp-table-header-text: var(--cp-navy-900);
    --cp-table-row-hover: #F2F6FC;
    --cp-table-border: var(--cp-border);

    /* 12. Navigation */
    --cp-nav-bg: var(--cp-navy-900);
    --cp-nav-text: #D8E1EB;
    --cp-nav-text-hover: var(--cp-white);
    --cp-nav-hover-bg: var(--cp-navy-800);
    --cp-nav-active-bg: rgba(33,190,211,.15);
    --cp-nav-active-text: var(--cp-cyan);
    --cp-nav-active-border: var(--cp-cyan);

    /* 13. Cards */
    --cp-card-bg: var(--cp-white);
    --cp-card-border: var(--cp-border);
    --cp-card-title: var(--cp-navy-900);
    --cp-card-text: var(--cp-slate);

    /* 14. Charts */
    --cp-chart-1: var(--cp-blue);
    --cp-chart-2: var(--cp-cyan);
    --cp-chart-3: var(--cp-green);
    --cp-chart-4: var(--cp-purple);
    --cp-chart-5: var(--cp-amber);
    --cp-chart-6: var(--cp-slate);

    /* 15. Borders */
    --cp-border-default: var(--cp-border);
    --cp-border-subtle: #DFE6EF;
    --cp-border-strong: var(--cp-slate);
    --cp-border-focus: var(--cp-blue);

    /* 16. Shadows */
    --cp-shadow-xs: 0 1px 2px rgba(12,22,38,.05);
    --cp-shadow-sm: 0 2px 6px rgba(12,22,38,.08);
    --cp-shadow-md: 0 8px 24px rgba(12,22,38,.12);
    --cp-shadow-lg: 0 16px 40px rgba(12,22,38,.16);

    /* 17. Radius */
    --cp-radius-xs: 4px;
    --cp-radius-sm: 6px;
    --cp-radius-md: 10px;
    --cp-radius-lg: 16px;
    --cp-radius-xl: 24px;
    --cp-radius-pill: 999px;

    /* 18. Typography */
    --cp-font-primary: Inter, Aptos, "Segoe UI", Arial, sans-serif;
    --cp-font-heading: Inter, Aptos, "Segoe UI", Arial, sans-serif;
    --cp-font-mono: "Cascadia Code", Consolas, monospace;
    --cp-font-size-xs: .75rem;
    --cp-font-size-sm: .875rem;
    --cp-font-size-md: 1rem;
    --cp-font-size-lg: 1.125rem;
    --cp-font-size-xl: 1.5rem;
    --cp-font-size-2xl: 2rem;
    --cp-font-weight-normal: 400;
    --cp-font-weight-medium: 500;
    --cp-font-weight-semibold: 600;
    --cp-font-weight-bold: 700;
    --cp-line-height: 1.5;

    /* 19. Gradients */
    --cp-gradient-primary: linear-gradient(135deg, var(--cp-navy-900) 0%, var(--cp-blue) 55%, var(--cp-cyan) 100%);
    --cp-gradient-accent: linear-gradient(135deg, var(--cp-blue) 0%, var(--cp-cyan) 55%, var(--cp-green) 100%);

    /* 20. Focus */
    --cp-focus-ring: 0 0 0 3px rgba(42,101,255,.22);

    /* 21. Spacing/layout */
    --cp-space-1: .25rem;
    --cp-space-2: .5rem;
    --cp-space-3: .75rem;
    --cp-space-4: 1rem;
    --cp-space-5: 1.25rem;
    --cp-space-6: 1.5rem;
    --cp-space-8: 2rem;
    --cp-space-10: 2.5rem;
    --cp-space-12: 3rem;
    --cp-sidebar-width: 260px;
    --cp-navbar-height: 64px;
    --cp-content-max: 1600px;
    --cp-transition-fast: .15s ease;
    --cp-transition-normal: .25s ease;

    /* Compatibility aliases for existing ControlPlan CSS/templates. */
    --brand-primary: var(--cp-action-primary);
    --brand-primary-light: var(--cp-cyan);
    --brand-primary-dark: var(--cp-action-primary-hover);
    --brand-secondary: var(--cp-slate);
    --brand-accent: var(--cp-cyan);
    --success: var(--cp-status-success);
    --warning: var(--cp-status-warning);
    --danger: var(--cp-status-danger);
    --info: var(--cp-status-info);
    --background: var(--cp-bg-page);
    --background-secondary: var(--cp-bg-muted);
    --background-dark: var(--cp-bg-dark);
    --surface: var(--cp-bg-surface);
    --surface-hover: var(--cp-table-row-hover);
    --surface-selected: var(--cp-bg-selected);
    --text-primary: var(--cp-text-primary);
    --text-secondary: var(--cp-text-secondary);
    --text-muted: var(--cp-text-muted);
    --text-white: var(--cp-text-inverse);
    --border: var(--cp-border-default);
    --border-light: var(--cp-border-subtle);
    --border-dark: var(--cp-border-strong);
    --sidebar-width: var(--cp-sidebar-width);
    --sidebar-bg: var(--cp-nav-bg);
    --sidebar-text: var(--cp-nav-text);
    --sidebar-hover: var(--cp-nav-hover-bg);
    --sidebar-active: var(--cp-nav-active-text);
    --navbar-height: var(--cp-navbar-height);
    --navbar-bg: var(--cp-bg-header);
    --navbar-border: var(--cp-border-subtle);
    --card-bg: var(--cp-card-bg);
    --card-border: var(--cp-card-border);
    --card-radius: var(--cp-radius-md);
    --table-header: var(--cp-table-header-bg);
    --table-hover: var(--cp-table-row-hover);
    --table-border: var(--cp-table-border);
    --input-height: 42px;
    --input-border: var(--cp-input-border);
    --input-focus: var(--cp-input-border-focus);
    --input-radius: var(--cp-radius-sm);
    --button-radius: var(--cp-radius-sm);
    --button-padding-x: 18px;
    --button-padding-y: 10px;
    --font-family: var(--cp-font-primary);
    --font-size-xs: var(--cp-font-size-xs);
    --font-size-sm: var(--cp-font-size-sm);
    --font-size-md: var(--cp-font-size-md);
    --font-size-lg: var(--cp-font-size-lg);
    --font-size-xl: var(--cp-font-size-xl);
    --font-size-2xl: var(--cp-font-size-2xl);
    --font-weight-normal: var(--cp-font-weight-normal);
    --font-weight-medium: var(--cp-font-weight-medium);
    --font-weight-bold: var(--cp-font-weight-bold);
    --line-height: var(--cp-line-height);
    --space-1: var(--cp-space-1); --space-2: var(--cp-space-2); --space-3: var(--cp-space-3);
    --space-4: var(--cp-space-4); --space-5: var(--cp-space-5); --space-6: var(--cp-space-6);
    --space-8: var(--cp-space-8); --space-10: var(--cp-space-10); --space-12: var(--cp-space-12);
    --radius-sm: var(--cp-radius-xs); --radius-md: var(--cp-radius-md); --radius-lg: var(--cp-radius-lg);
    --radius-xl: var(--cp-radius-xl); --radius-round: var(--cp-radius-pill);
    --shadow-sm: var(--cp-shadow-sm); --shadow-md: var(--cp-shadow-md); --shadow-lg: var(--cp-shadow-lg);
    --transition-fast: var(--cp-transition-fast); --transition-normal: var(--cp-transition-normal);
}