/* ==========================================================================
   Nexoriss Finance — Design tokens (single source)
   Light-default, cleaner/flatter palette. Dark theme via [data-theme="dark"].
   Legacy token names are preserved and re-pointed so existing pages adopt the
   new look immediately; per-page CSS is refined in later phases.
   ========================================================================== */

/* -- Brand font (self-hosted, no CDN) ------------------------------------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-700.woff2") format("woff2");
}

/* -- Non-themed tokens (shared by light & dark) --------------------------- */
:root {
    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --lh-tight: 1.2;
    --lh-base: 1.5;

    /* Spacing scale (single source) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Radii — flatter/modern scale */
    --radius-full: 999px;
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 9px;

    /* Layout */
    --page-gutter: clamp(1rem, 1.4vw, 1.5rem);
    --page-gutter-mobile: 1rem;
    --page-section-gap: 1.25rem;
    --content-max: 1600px;
    --sidebar-width: 264px;
    --touch-target: 44px;
    --touch-target-compact: 40px;
    --topbar-height: 60px;
    --topbar-height-mobile: 58px;
    --bottom-nav-height: 62px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Breakpoints — for reference only (CSS media queries can't read vars):
       sm 640px · md 768px · lg 1024px · xl 1280px */
}

/* -- Light theme (default) ------------------------------------------------ */
:root,
html[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --bg: #f4f6fa;
    --bg-elevated: #ffffff;
    --bg-page-start: #f4f6fa;
    --bg-page-end: #f4f6fa;
    --bg-radial-1: transparent;
    --bg-radial-2: transparent;
    --bg-radial-3: transparent;
    --panel: #ffffff;
    --panel-strong: #ffffff;
    --panel-soft: #f1f4f9;
    --panel-muted: #f7f9fc;
    /* Surface tokens are gradient layers so `background: var(--surface-x), var(--panel)` stays valid. */
    --surface-raised: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    --surface-soft: linear-gradient(180deg, #f9fbfe 0%, #f3f6fb 100%);
    --surface-brand: linear-gradient(145deg, color-mix(in srgb, var(--brand-2) 9%, #ffffff), #ffffff 62%);
    --surface-brand-strong: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 15%, #ffffff), #ffffff);
    --surface-selected: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 13%, #ffffff), #ffffff);
    --sidebar-bg: #ffffff;
    --header-bg: linear-gradient(180deg, #ffffff, #ffffff);
    --overlay: rgba(15, 23, 42, 0.42);
    --overlay-soft: rgba(15, 23, 42, 0.28);

    /* Lines / borders */
    --line: #e4e8ef;
    --line-strong: #d3d9e3;
    --line-soft: #eef1f6;
    --line-stronger: #c3ccd9;

    /* Text */
    --text: #1b2432;
    --text-strong: #0c1420;
    --muted: #5c6675;
    --muted-strong: #3b4553;
    --muted-soft: #7a8494;

    /* Brand */
    --brand: #3b6ef5;
    --brand-2: #3b6ef5;
    --brand-3: #0ea5a4;
    --brand-ink: #ffffff;
    --accent-green: #12a150;
    --accent-green-strong: #0e8a44;

    /* Semantic */
    --positive: #12a150;
    --negative: #e5484d;
    --warning: #c47f0a;
    --danger-bg: #fdecec;
    --danger-line: #f4c6c6;
    --danger-text: #b42318;

    /* Interaction */
    --hover-fill: rgba(15, 23, 42, 0.05);
    --hover-fill-soft: rgba(15, 23, 42, 0.03);
    --focus-ring: rgba(59, 110, 245, 0.45);
    --focus-shadow: 0 0 0 3px rgba(59, 110, 245, 0.18);

    /* Inputs */
    --input-bg: #ffffff;
    --input-bg-strong: #ffffff;
    --input-placeholder: #97a1b0;

    /* Elevation */
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.08);
    --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 16px rgba(16, 24, 40, 0.06);
}

/* -- Dark theme ----------------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces */
    --bg: #0d1117;
    --bg-elevated: #161b22;
    --bg-page-start: #0d1117;
    --bg-page-end: #0d1117;
    --bg-radial-1: transparent;
    --bg-radial-2: transparent;
    --bg-radial-3: transparent;
    --panel: #161b22;
    --panel-strong: #1a212b;
    --panel-soft: #1c2431;
    --panel-muted: #171d26;
    /* Surface tokens are gradient layers so `background: var(--surface-x), var(--panel)` stays valid. */
    --surface-raised: linear-gradient(180deg, #1b222d 0%, #161b22 100%);
    --surface-soft: linear-gradient(180deg, #191f29 0%, #151a21 100%);
    --surface-brand: linear-gradient(145deg, color-mix(in srgb, var(--brand-2) 20%, #161b22), #161b22 62%);
    --surface-brand-strong: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 28%, #161b22), #161b22);
    --surface-selected: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 24%, #161b22), #161b22);
    --sidebar-bg: #0f141b;
    --header-bg: linear-gradient(180deg, #0f141b, #0f141b);
    --overlay: rgba(2, 6, 12, 0.62);
    --overlay-soft: rgba(2, 6, 12, 0.5);

    /* Lines / borders */
    --line: #242c38;
    --line-strong: #33405280;
    --line-soft: #1f2733;
    --line-stronger: #3a4a63;

    /* Text */
    --text: #e6edf3;
    --text-strong: #f4f8fc;
    --muted: #8b98a9;
    --muted-strong: #b8c3d1;
    --muted-soft: #74808f;

    /* Brand */
    --brand: #6ea3ff;
    --brand-2: #4f8bff;
    --brand-3: #2dd4bf;
    --brand-ink: #06101f;
    --accent-green: #45d483;
    --accent-green-strong: #34c470;

    /* Semantic */
    --positive: #3fca86;
    --negative: #ff6b6b;
    --warning: #f0b429;
    --danger-bg: rgba(229, 72, 77, 0.14);
    --danger-line: rgba(255, 107, 107, 0.28);
    --danger-text: #ffd7d5;

    /* Interaction */
    --hover-fill: rgba(255, 255, 255, 0.06);
    --hover-fill-soft: rgba(255, 255, 255, 0.04);
    --focus-ring: rgba(110, 163, 255, 0.5);
    --focus-shadow: 0 0 0 3px rgba(79, 139, 255, 0.22);

    /* Inputs */
    --input-bg: #0f141b;
    --input-bg-strong: #131a23;
    --input-placeholder: #6b7686;

    /* Elevation */
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 22px rgba(0, 0, 0, 0.34);
}