/*
 * Theme: Horizon  (key: classic · shell: gradient · sign-in: split)
 *
 * A bright SaaS workspace: a sidebar filled with the indigo-to-sky brand
 * gradient (white pill for the active page) beside a cool, airy canvas,
 * sky-gradient hero surfaces, soft tinted shadows and generous rounding.
 * Type: Outfit.
 */

[data-site-theme="classic"] {
    --font-sans: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --display-weight: 600;
    --display-tracking: -.03em;

    --bg-body: #f4f6fb;
    --bg-card: #ffffff;
    --bg-subtle: #f8f9fd;
    --bg-inset: #eef1f8;
    --text-heading: #0f172a;
    --text-body: #475569;
    --text-muted: #8a94a8;
    --border-color: #e6e9f2;
    --border-strong: #d6dbe7;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --control-radius: 12px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 2px 6px rgba(37, 52, 120, .06);
    --shadow: 0 10px 30px -12px rgba(37, 52, 120, .18);
    --shadow-lg: 0 24px 60px -24px rgba(37, 52, 120, .35);

    --content-max: 1280px;
    --bar-height: 72px;

    --nav-width: 268px;
    --nav-bg: linear-gradient(185deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 62%, #0ea5e9) 100%);
    --nav-text: rgba(255, 255, 255, .8);
    --nav-text-strong: #ffffff;
    --nav-muted: rgba(255, 255, 255, .55);
    --nav-border: transparent;
    --nav-hover: rgba(255, 255, 255, .12);
    --nav-active-bg: #ffffff;
    --nav-active-text: var(--primary);
    --nav-radius: 999px;
    --bar-bg: rgba(255, 255, 255, .88);
    --bar-border: #e6e9f2;

    --hero-bg: linear-gradient(125deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, #0ea5e9) 60%, #0ea5e9 100%);
}

[data-site-theme="classic"][data-theme="dark"] {
    --bg-body: #0b1020;
    --bg-card: #121a2e;
    --bg-subtle: #151e35;
    --bg-inset: #1a2440;
    --bg-elevated: #172038;
    --text-heading: #eef2ff;
    --text-body: #aab4cc;
    --text-muted: #6f7a96;
    --border-color: #222c47;
    --border-strong: #2d3a5c;
    --bar-bg: rgba(15, 21, 40, .86);
    --bar-border: #222c47;
    --nav-bg: linear-gradient(185deg, color-mix(in srgb, var(--primary) 55%, #0b1020) 0%, #0e1a33 100%);
    --nav-active-bg: rgba(255, 255, 255, .95);
    --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, .7);
}

/* Gradient sidebar: white brand tile, white active pill, a soft light bloom */
[data-site-theme="classic"] .app-nav { box-shadow: 8px 0 30px -18px rgba(37, 52, 120, .45); }
[data-site-theme="classic"] .app-nav::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; pointer-events: none;
    background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, .2), transparent);
}
[data-site-theme="classic"] .app-nav > * { position: relative; }
[data-site-theme="classic"] .brand-mark { border-radius: 12px; }
[data-site-theme="classic"] .app-nav .brand-mark--default { background: #ffffff; color: var(--primary); }
[data-site-theme="classic"] .nav-link { padding: .6rem .9rem; }
[data-site-theme="classic"] .nav-link.is-active { box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .55); }
[data-site-theme="classic"] .nav-link__badge { background: #ffffff; color: var(--primary); }
[data-site-theme="classic"] .nav-link.is-active .nav-link__badge { background: var(--primary); color: #ffffff; }
[data-site-theme="classic"] .app-nav__user { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; }
[data-site-theme="classic"] .app-nav .avatar { background: #ffffff; color: var(--primary); }

/* Top bar: a quiet shadow instead of a heavy rule */
[data-site-theme="classic"] .app-header { box-shadow: 0 1px 0 var(--bar-border), 0 8px 24px -18px rgba(37, 52, 120, .3); border-bottom: 0; }

/* A soft light wash behind the page head area */
[data-site-theme="classic"] .app-main {
    background:
        radial-gradient(900px 340px at 85% -120px, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%),
        radial-gradient(700px 300px at 0% -100px, color-mix(in srgb, #0ea5e9 10%, transparent), transparent 70%);
}

/* Dashboard */
[data-site-theme="classic"] .dash-hero__intro {
    background:
        radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%),
        var(--bg-card);
    box-shadow: var(--shadow);
    border-color: transparent;
}
[data-site-theme="classic"] .dash-stat,
[data-site-theme="classic"] .svc-card,
[data-site-theme="classic"] .card { box-shadow: var(--shadow-sm); border-color: transparent; }
[data-site-theme="classic"] .svc-card:hover { box-shadow: var(--shadow); }
[data-site-theme="classic"] .dash-stat__icon,
[data-site-theme="classic"] .svc-card__icon { border-radius: 50%; }

/* Service pages: gradient header with a rounded bottom edge */
[data-site-theme="classic"] .verify-card { border: 0; }

/* Buttons are pills */
[data-site-theme="classic"] .btn { border-radius: 999px; }
[data-site-theme="classic"] .btn-primary { background: linear-gradient(120deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #0ea5e9)); border: 0; }

/* Sign-in: sky panel with a floating record card */
[data-site-theme="classic"] .auth-showcase::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(600px 400px at 90% 10%, rgba(255,255,255,.22), transparent 60%),
        radial-gradient(500px 500px at 10% 100%, rgba(14,165,233,.45), transparent 60%);
}
[data-site-theme="classic"] .auth-main { background: var(--bg-card); }