/**
 * Domen Hub — Official Design Tokens & Brand System
 * Source of Truth: Domen Hub Official Brand Pack (Monitor. Protect. Connect.)
 */

:root {
    /* --- Core Brand Color Palette --- */
    --brand-primary: #0B1D33;         /* Deep Navy */
    --brand-primary-light: #162E4E;   /* Navy Medium */
    --brand-primary-dark: #06111E;    /* Navy Deep */
    
    --brand-secondary: #147DF5;       /* Cyan Blue */
    --brand-secondary-hover: #0F6AD3; /* Blue Hover */
    --brand-secondary-light: #EBF4FE; /* Blue Subtle Tint */
    
    --brand-accent: #00C896;          /* Emerald */
    --brand-accent-hover: #00B083;    /* Emerald Hover */
    --brand-accent-light: #E6F9F4;    /* Emerald Subtle Tint */

    /* --- Surfaces & Backgrounds --- */
    --brand-bg: #F6F8FA;              /* App Background (Off-White) */
    --brand-surface: #F6F8FA;         /* Base Surface */
    --brand-surface-subtle: #F1F4F8;  /* Muted Surface / Header Sub-bg */
    --brand-card: #FFFFFF;            /* Pure White Card */
    --brand-card-hover: #F8FAFC;      /* Card Hover State */
    --brand-border: #E1E6ED;          /* Canonical Border Gray */
    --brand-border-subtle: #EDF2F7;   /* Subtle Inner Border */
    --brand-input-bg: #FFFFFF;        /* Input Background */

    /* --- Typography & Text Slate Hierarchy --- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --brand-text: #1B2430;            /* Slate Dark Text (Primary) */
    --brand-text-secondary: #475569;  /* Slate Secondary */
    --brand-text-muted: #64748B;      /* Slate Muted */
    --brand-text-subtle: #94A3B8;     /* Subtle Text / Placeholders */
    --brand-text-inverted: #FFFFFF;   /* White on Dark */

    /* --- Status & Taxonomy Colors --- */
    --state-success: #00C896;         /* Emerald Valid / Healthy / UP */
    --state-success-bg: #E6F9F4;
    --state-success-border: #A3ECD9;
    --state-success-text: #057A5D;

    --state-warning: #F59E0B;         /* Amber Warning / Expiring / Degraded */
    --state-warning-bg: #FEF3C7;
    --state-warning-border: #FCD34D;
    --state-warning-text: #92400E;

    --state-danger: #EF4444;          /* Red Critical / Down / Expired */
    --state-danger-bg: #FEE2E2;
    --state-danger-border: #FCA5A5;
    --state-danger-text: #991B1B;

    --state-info: #147DF5;            /* Blue Info / Notice */
    --state-info-bg: #EBF4FE;
    --state-info-border: #BFDBFE;
    --state-info-text: #1E40AF;

    --state-neutral: #64748B;         /* Muted / Inactive / Disabled */
    --state-neutral-bg: #F1F5F9;
    --state-neutral-border: #CBD5E1;
    --state-neutral-text: #475569;

    /* --- Gradients --- */
    --gradient-brand: linear-gradient(90deg, #0B1D33 0%, #147DF5 60%, #00C896 100%);
    --gradient-hero: linear-gradient(180deg, #FFFFFF 0%, #F6F8FA 100%);
    --gradient-primary-btn: linear-gradient(135deg, #147DF5 0%, #0E65CE 100%);
    --gradient-accent-btn: linear-gradient(135deg, #00C896 0%, #00A67C 100%);

    /* --- Radius Scale --- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 9999px;

    /* --- Shadow Scale --- */
    --shadow-xs: 0 1px 2px rgba(11, 29, 51, 0.04);
    --shadow-subtle: 0 1px 3px rgba(11, 29, 51, 0.05), 0 1px 2px rgba(11, 29, 51, 0.03);
    --shadow-card: 0 4px 16px rgba(11, 29, 51, 0.05), 0 1px 3px rgba(11, 29, 51, 0.03);
    --shadow-card-hover: 0 8px 24px rgba(11, 29, 51, 0.08), 0 2px 6px rgba(11, 29, 51, 0.04);
    --shadow-modal: 0 20px 40px rgba(11, 29, 51, 0.16), 0 4px 12px rgba(11, 29, 51, 0.08);
    --shadow-btn: 0 4px 12px rgba(20, 125, 245, 0.22);
    --shadow-btn-hover: 0 6px 18px rgba(20, 125, 245, 0.32);
    --shadow-focus: 0 0 0 3px rgba(20, 125, 245, 0.20);
    --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.20);

    /* --- Transitions --- */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}