/*
 * HostPanel Apex Design System
 * Single source of truth for public website, admin panel, client panel, and auth.
 */

:root {
    --ds-bg: #e9f0f7;
    --ds-bg-soft: #f3f7fb;
    --ds-surface: #ffffff;
    --ds-surface-soft: #f8fafc;
    --ds-ink: #111827;
    --ds-ink-soft: #334155;
    --ds-muted: #64748b;
    --ds-faint: #94a3b8;
    --ds-line: #d9e3ef;
    --ds-line-soft: #edf2f7;
    --ds-primary: #0757d9;
    --ds-primary-strong: #063da4;
    --ds-primary-soft: #e8f1ff;
    --ds-cyan: #047f9d;
    --ds-success: #047857;
    --ds-warning: #b45309;
    --ds-danger: #b91c1c;
    --ds-navy: #030a14;
    --ds-navy-2: #07101e;
    --ds-radius: 10px;
    --ds-radius-sm: 7px;
    --ds-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 48px rgba(15, 23, 42, .1);
    --ds-shadow-soft: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px rgba(15, 23, 42, .07);
    --ds-focus: 0 0 0 .22rem rgba(21, 94, 239, .16);
    --ds-grid-dark:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px);
    --ds-grid-light:
        linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 23, 42, .035) 1px, transparent 1px);

    /* Legacy aliases: keep old pages visually consistent. */
    --primary: var(--ds-primary);
    --primary-dark: var(--ds-primary-strong);
    --secondary: var(--ds-cyan);
    --success: var(--ds-success);
    --warning: var(--ds-warning);
    --danger: var(--ds-danger);
    --info: var(--ds-cyan);
    --light: var(--ds-bg-soft);
    --dark: var(--ds-navy);
    --text: var(--ds-muted);
    --text-light: var(--ds-faint);
    --border-radius: var(--ds-radius);
    --gradient-primary: linear-gradient(180deg, var(--ds-primary), var(--ds-primary-strong));
    --gradient-hero: linear-gradient(135deg, var(--ds-navy) 0%, #0f172a 52%, #111827 100%);
    --shadow: var(--ds-shadow-soft);
    --shadow-md: var(--ds-shadow);
    --shadow-lg: 0 28px 80px rgba(15, 23, 42, .14);

    --hp-primary: var(--ds-primary);
    --hp-secondary: var(--ds-primary-strong);
    --hp-accent: var(--ds-cyan);
    --hp-dark: var(--ds-navy);
    --hp-darker: var(--ds-navy-2);
    --hp-success: var(--ds-success);
    --hp-warning: var(--ds-warning);
    --hp-danger: var(--ds-danger);
    --hp-info: var(--ds-cyan);
    --hp-light: var(--ds-bg-soft);
    --hp-text: var(--ds-muted);
    --hp-text-light: var(--ds-faint);
    --hp-gradient: linear-gradient(180deg, var(--ds-primary), var(--ds-primary-strong));
    --hp-gradient-wide: linear-gradient(135deg, var(--ds-primary), var(--ds-cyan));
    --hp-radius: var(--ds-radius);
    --hp-radius-lg: var(--ds-radius);
    --hp-radius-xl: 14px;
    --hp-shadow: var(--ds-shadow-soft);
    --hp-shadow-md: var(--ds-shadow);
    --hp-shadow-lg: 0 28px 80px rgba(15, 23, 42, .14);

    --apex-bg: var(--ds-bg);
    --apex-paper: var(--ds-surface);
    --apex-paper-soft: var(--ds-surface-soft);
    --apex-ink: var(--ds-ink);
    --apex-muted: var(--ds-muted);
    --apex-faint: var(--ds-faint);
    --apex-line: var(--ds-line);
    --apex-line-soft: var(--ds-line-soft);
    --apex-blue: var(--ds-primary);
    --apex-blue-2: var(--ds-primary-strong);
    --apex-cyan: var(--ds-cyan);
    --apex-green: var(--ds-success);
    --apex-amber: var(--ds-warning);
    --apex-red: var(--ds-danger);
    --apex-navy: var(--ds-navy);
    --apex-navy-2: var(--ds-navy-2);
    --apex-radius: var(--ds-radius);
    --apex-radius-sm: var(--ds-radius-sm);
    --apex-shadow: var(--ds-shadow);
    --apex-shadow-tight: var(--ds-shadow-soft);
    --apex-focus: var(--ds-focus);

    --web-bg: var(--ds-bg-soft);
    --web-paper: var(--ds-surface);
    --web-ink: var(--ds-ink);
    --web-muted: var(--ds-muted);
    --web-line: var(--ds-line);
    --web-blue: var(--ds-primary);
    --web-cyan: var(--ds-cyan);
    --web-green: var(--ds-success);
    --web-navy: var(--ds-navy);
    --web-navy-2: var(--ds-navy-2);
    --web-amber: #f59e0b;
    --web-radius: var(--ds-radius);
    --web-shadow: var(--ds-shadow);
    --web-shadow-soft: var(--ds-shadow-soft);
}

* {
    letter-spacing: 0;
}

html,
body {
    color: var(--ds-ink);
    font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
}

.btn,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.input-group-text,
.alert,
.badge {
    letter-spacing: 0;
}