/* Semantic design tokens. Component CSS should reference only these. */
:root {
    /* Content */
    --content-primary: var(--hci-grayblue-900);
    --content-secondary: var(--hci-navy-400);
    --content-tertiary: var(--hci-navy-300);
    --content-primary-inverse: var(--hci-white-100);
    --content-icon: var(--hci-grayblue-400);
    --content-icon-hover: var(--hci-grayblue-500);

    /* Background */
    --background-primary: var(--hci-white-100);
    --background-primary-rgb: 255, 255, 255;
    --background-secondary: var(--hci-grayblue-100);
    --background-tertiary: var(--hci-grayblue-200);
    --background-inverse: var(--hci-navy-500);
    --background-inverse-rgb: 29, 39, 73;

    /* Background - brand. Each -rgb companion must match the hex above it. */
    --background-brand-primary: var(--hci-brand-700);
    --background-brand-primary-rgb: 30, 131, 135;
    --background-brand-hover: var(--hci-brand-750);
    --background-brand-light: var(--hci-brand-400);
    --background-brand-accent: var(--hci-aqua-500);
    --background-brand-accent-rgb: 118, 195, 222;

    /* No HCI equivalent yet; raised with their design team. */
    --background-brand-secondary: #215368;
    --background-brand-secondary-rgb: 33, 83, 104;
    --background-brand-accent-strong: #39A0BC;

    /* Border */
    --border-primary: var(--hci-grayblue-200);
    --border-primary-rgb: 217, 219, 233;
    --border-secondary: var(--hci-grayblue-300);

    /* Status - error */
    --error-50: #FEF2F2;
    --error-100: #FEE2E2;
    --error-200: #FECACA;
    --error-500: #EF4444;
    --error-500-rgb: 239, 68, 68;
    --error-600: #DC2626;
    --error-800: #991B1B;
    --error-900: #7F1D1D;

    /* Status - warning */
    --warning-50: #FFFBEB;
    --warning-100: #FEF3C7;
    --warning-200: #FDE68A;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --warning-800: #92400E;

    /* Status - info */
    --info-50: #EFF6FF;
    --info-100: #DBEAFE;
    --info-200: #BFDBFE;
    --info-300: #93C5FD;
    --info-500: #3B82F6;
    --info-500-rgb: 59, 130, 246;
    --info-600: #2563EB;
    --info-700: #1D4ED8;
    --info-800: #1E40AF;

    /* Status - success. The "soft" ramp is a second green, used on auth. */
    --success-100: #D1FAE5;
    --success-200: #A7F3D0;
    --success-500: #10B981;
    --success-500-rgb: 16, 185, 129;
    --success-600: #059669;
    --success-800: #065F46;
    --success-soft-50: #F0FDF4;
    --success-soft-100: #E8F5E9;
    --success-soft-200: #BBF7D0;
    --success-soft-600: #16A34A;

    --success: var(--success-500);
    --warning: var(--warning-500);
    --error: var(--error-500);
    --info: var(--info-500);

    /* Accent */
    --purple-500: #A855F7;
    --purple-500-rgb: 168, 85, 247;
    --purple-600: #9333EA;

    --black-rgb: 0, 0, 0;

    /* Accent bars. Figma: BorderGradient / BorderGradientNotice. */
    --border-gradient: linear-gradient(90deg, var(--background-brand-primary) 0%, var(--background-brand-light) 50%, var(--background-brand-primary) 100%);
    --border-gradient-notice: linear-gradient(90deg, var(--warning-600) 0%, var(--warning-500) 50%, var(--warning-600) 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(var(--background-inverse-rgb), 0.04);
    --shadow-md: 0 4px 12px rgba(var(--background-inverse-rgb), 0.08);
    --shadow-lg: 0 8px 24px rgba(var(--background-inverse-rgb), 0.12);
    --shadow-xl: 0 16px 48px rgba(var(--background-inverse-rgb), 0.16);
    --shadow-glow: 0 0 40px rgba(var(--background-brand-primary-rgb), 0.2);

    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Icon sizes */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;

    /* Superseded names, kept until component CSS is migrated. Do not use in
       new rules. */
    --brand-primary: var(--background-brand-primary);
    --brand-primary-rgb: var(--background-brand-primary-rgb);
    --brand-primary-light: var(--background-brand-light);
    --brand-primary-dark: var(--background-brand-hover);
    --brand-dark: var(--background-inverse);
    --brand-dark-rgb: var(--background-inverse-rgb);
    --brand-secondary: var(--background-brand-secondary);
    --brand-secondary-rgb: var(--background-brand-secondary-rgb);
    --brand-accent: var(--background-brand-accent);
    --brand-accent-rgb: var(--background-brand-accent-rgb);
    --brand-accent-dark: var(--background-brand-accent-strong);
    --on-brand-primary: var(--content-primary-inverse);
    --text-primary: var(--content-primary);
    --text-secondary: var(--content-secondary);
    --text-muted: var(--content-tertiary);
    --gray-400: var(--content-icon);
    --gray-500: var(--content-icon-hover);
    --border-light: var(--border-primary);
    --border-light-rgb: var(--border-primary-rgb);
    --border-medium: var(--border-secondary);
}