/* 4Sofit — Royal Emerald design tokens (Phase A premium)
 * Load after app.css to override legacy teal palette.
 */

:root {
    /* Brand — Royal Emerald */
    --brand: #0a7b6e;
    --primary: #0a7b6e;
    --brand-dark: #064e45;
    --brand-bright: #14b8a6;
    --brand-light: #d1fae8;
    --brand-muted: #5eead4;
    --brand-glow: rgba(10, 123, 110, 0.22);

    /* Premium accent — subscription / VIP / KPI highlight */
    --accent-gold: #c9a227;
    --accent-gold-dark: #9a7b1a;
    --accent-gold-light: #f5e6b8;
    --accent-gold-muted: rgba(201, 162, 39, 0.14);

    /* Surfaces */
    --bg: #f7f9fb;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #f1f5f9;

    /* Sidebar */
    --sidebar: #0b1220;
    --sidebar-hover: #152032;
    --sidebar-accent: #0a7b6e;
    --sidebar-gradient: linear-gradient(180deg, #0b1220 0%, #0f1d2e 48%, #0b1220 100%);

    /* Text */
    --text: #0c1222;
    --text-muted: #5c6b7a;
    --text-subtle: #94a3b8;

    /* Borders & shadows */
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --shadow: 0 1px 3px rgba(12, 18, 34, 0.07), 0 4px 18px rgba(12, 18, 34, 0.05);
    --shadow-elevated: 0 8px 32px rgba(12, 18, 34, 0.1), 0 2px 8px rgba(12, 18, 34, 0.06);
    --shadow-brand: 0 4px 18px var(--brand-glow);

    /* Semantic */
    --danger: #dc2626;
    --success: #059669;
    --warning: #d97706;
    --info: #0284c7;

    /* Numbers */
    --num-brand: #064e45;
    --num-positive: #059669;
    --num-negative: #dc2626;
    --num-caution: #d97706;
    --num-muted: #94a3b8;

    /* Radius scale */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* Unified breakpoints (reference — use in @media) */
    --bp-xs-max: 767px;
    --bp-sm-min: 768px;
    --bp-md-max: 1023px;
    --bp-lg-min: 1024px;
    --bp-xl-min: 1440px;
    --shell-drawer-max: 992px;
}