@font-face {
    font-family: "InterVariable";
    src: url("/fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "ManropeVariable";
    src: url("/fonts/Manrope-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    --font-body: "InterVariable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: "ManropeVariable", "InterVariable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --brand-ink: #1f2933;
    --brand-navy: #182028;
    --brand-blue: #1f8a5b;
    --brand-blue-strong: #176948;
    --brand-cyan: #b88a44;
    --brand-mint: #d9f0e4;
    --brand-success: #16a34a;
    --brand-warning: #b88a44;
    --brand-danger: #c1664a;
    --neutral-canvas: #f6f1ea;
    --neutral-section: #eee6dc;
    --neutral-surface: #fffdf9;
    --neutral-border: #cec2b2;
    --neutral-border-strong: #b9ab9a;
    --neutral-text: #1f2933;
    --neutral-muted: #55626d;
    --neutral-subtle: #766b60;
    --shadow-rgb: 31, 41, 51;

    --radius-12: 12px;
    --radius-18: 18px;
    --radius-24: 24px;
    --radius-pill: 999px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;

    --shadow-soft: 0 18px 40px rgba(var(--shadow-rgb), 0.06);
    --shadow-medium: 0 22px 48px rgba(var(--shadow-rgb), 0.1);
    --shadow-floating: 0 28px 64px rgba(var(--shadow-rgb), 0.14);
    --shadow-glow: 0 0 0 1px rgba(31, 138, 91, 0.16), 0 18px 40px rgba(31, 138, 91, 0.12);
    --focus-ring: 0 0 0 3px rgba(31, 138, 91, 0.2);

    --surface-canvas: #f6f1ea;
    --surface-section: #eee6dc;
    --surface-panel: rgba(255, 253, 249, 0.9);
    --surface-raised: #fffdf9;
    --surface-interactive: #f6ede3;
    --surface-overlay: rgba(24, 32, 40, 0.68);
    --surface-hero: linear-gradient(180deg, #f7f1e8 0%, #f2eadf 100%);
    --surface-auth: linear-gradient(180deg, rgba(255, 253, 249, 0.9) 0%, rgba(246, 241, 234, 0.92) 100%);
    --surface-shell: linear-gradient(180deg, #161d24 0%, #1d2630 100%);
    --surface-shell-active: linear-gradient(135deg, rgba(41, 62, 52, 0.92) 0%, rgba(31, 138, 91, 0.82) 100%);

    --text-strong: #1f2933;
    --text-default: #31404c;
    --text-muted: #5b6b7d;
    --text-inverse: #fffdf9;
    --text-accent: #1f8a5b;

    --border-subtle: rgba(31, 41, 51, 0.08);
    --border-default: #cec2b2;
    --border-strong: #b9ab9a;
    --border-focus: rgba(31, 138, 91, 0.42);

    --status-online: #16a34a;
    --status-working: #1f8a5b;
    --status-idle: #b88a44;
    --status-offline: #94a3b8;
    --status-warning: #b88a44;
    --status-danger: #c1664a;

    --illustration-ink: #1f2933;
    --illustration-primary: #182028;
    --illustration-secondary: #1f8a5b;
    --illustration-accent: #b88a44;
    --illustration-soft: #e8dfd2;
    --illustration-base: #fffaf3;

    --dark-navy: var(--brand-ink);
    --deep-blue: var(--brand-navy);
    --steel-blue: #1f8a5b;
    --ice-blue: #d9f0e4;
    --soft-white: #fffdf9;

    --color-bg: var(--surface-canvas);
    --color-bg-elevated: var(--surface-raised);
    --color-surface-muted: var(--surface-section);
    --color-text: var(--text-strong);
    --color-text-muted: var(--text-muted);
    --color-text-accent: var(--text-accent);
    --color-border: var(--border-default);
    --color-border-strong: var(--border-strong);
    --color-shadow-rgb: var(--shadow-rgb);
    --color-primary: var(--brand-blue);
    --color-primary-hover: var(--brand-blue-strong);
    --color-link-muted: #b8c0ba;
    --color-sidebar-bg: #182028;
    --color-sidebar-text: #f8fbff;
    --color-sidebar-link: #d9e0d9;
    --color-sidebar-link-hover-bg: rgba(255, 255, 255, 0.06);
    --color-topbar-bg: rgba(255, 252, 247, 0.92);
    --color-topbar-border: rgba(31, 41, 51, 0.08);
    --color-public-nav-bg: rgba(248, 243, 236, 0.92);
    --color-public-nav-text: #1f2933;
    --color-public-footer-bg: #182028;
    --color-public-footer-text: #f8f3ee;
    --color-public-footer-link: #d9f0e4;
    --color-cookie-bg: #fffdf9;
    --color-cookie-title: #1f2933;
    --color-cookie-copy: #5e6a73;
    --color-cookie-option-bg: #faf5ee;
    --color-card-surface: rgba(255, 253, 249, 0.96);
    --color-card-border: rgba(206, 194, 178, 0.86);
    --color-stat-border: rgba(206, 194, 178, 0.86);
    --color-table-head-bg: #efe4d7;
    --color-table-head-border: #d7c7b6;
    --color-table-head-text: #525c57;
    --color-table-row-text: #31404c;
    --color-table-row-border: #e3d8cb;
    --color-table-row-alt-bg: rgba(249, 243, 236, 0.94);
    --color-table-row-hover-bg: rgba(31, 138, 91, 0.04);
    --color-activity-feed-border: rgba(216, 206, 194, 0.72);
    --color-screenshot-border: rgba(216, 206, 194, 0.88);
    --color-screenshot-bg: #f8f3ed;
    --color-placeholder-border: #d8cec2;
    --color-placeholder-bg: #f7f1ea;
    --color-placeholder-text: #7c746d;
    --color-timeline-chip-bg: rgba(255, 253, 249, 0.92);
    --color-timeline-chip-border: #d8cec2;
    --color-timeline-chip-hover-bg: #f9f4ee;
    --color-timeline-chip-hover-border: #c5baad;
    --color-timeline-chip-active-bg: rgba(31, 138, 91, 0.08);
    --color-timeline-chip-active-border: rgba(31, 138, 91, 0.28);
    --color-timeline-chip-text: #31404c;
    --color-timeline-chip-subtle-text: #6e7770;
    --color-timeline-chip-count-text: #6e7770;
    --color-timeline-row-bg: rgba(255, 253, 249, 0.94);
    --color-timeline-row-border: #d8cec2;
    --color-timeline-label: #404b46;
    --color-timeline-meta: #5e6a73;
    --color-timeline-empty: #8a7f74;
    --color-timeline-stat-strong: #1f2933;
    --color-timeline-stat-text: #44515b;
    --color-timeline-stat-label: #7a736c;
    --color-usage-title-text: #1f8a5b;
    --color-usage-title-alt-text: #b88a44;
    --color-usage-title-border: #e1d8cc;
    --color-usage-item-text: #31404c;
    --color-usage-value-text: #67737b;
    --color-inline-code-bg: #efe4d7;
    --color-timeline-bar-bg: #e7ddd2;
    --color-timeline-bar-fill: linear-gradient(90deg, #1f8a5b 0%, #b88a44 100%);
    --color-badge-on-dark: rgba(255, 253, 249, 0.14);
    --gradient-hero: linear-gradient(180deg, #f7f1e8 0%, #f2eadf 100%);
    --gradient-card-header: linear-gradient(135deg, #253039 0%, #35443b 100%);
    --color-auth-card-subtitle: rgba(248, 243, 238, 0.78);
    --gradient-auth-pane: linear-gradient(180deg, rgba(255, 253, 249, 0.94) 0%, rgba(246, 241, 234, 0.96) 100%);
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --shadow-rgb: 0, 0, 0;

    --surface-canvas: #12181d;
    --surface-section: #191f24;
    --surface-panel: rgba(29, 36, 42, 0.9);
    --surface-raised: #20282e;
    --surface-interactive: #252e35;
    --surface-overlay: rgba(10, 12, 14, 0.82);
    --surface-hero: linear-gradient(180deg, #151b20 0%, #1b2228 100%);
    --surface-auth: linear-gradient(180deg, rgba(32, 40, 46, 0.96) 0%, rgba(21, 27, 32, 0.98) 100%);
    --surface-shell: linear-gradient(180deg, #141a1f 0%, #182027 100%);
    --surface-shell-active: linear-gradient(135deg, rgba(52, 71, 61, 0.86) 0%, rgba(31, 138, 91, 0.58) 100%);

    --text-strong: #f3eee8;
    --text-default: #ddd4ca;
    --text-muted: #a59b90;
    --text-inverse: #fffdf9;
    --text-accent: #8fd0ad;

    --border-subtle: rgba(243, 238, 232, 0.06);
    --border-default: #364048;
    --border-strong: #46515a;
    --border-focus: rgba(143, 208, 173, 0.42);

    --color-bg: var(--surface-canvas);
    --color-bg-elevated: var(--surface-raised);
    --color-surface-muted: var(--surface-section);
    --color-text: var(--text-strong);
    --color-text-muted: var(--text-muted);
    --color-text-accent: var(--text-accent);
    --color-border: var(--border-default);
    --color-border-strong: var(--border-strong);
    --color-primary: #57a978;
    --color-primary-hover: #6eb88d;
    --color-link-muted: #b8beb8;
    --color-sidebar-bg: #141a1f;
    --color-sidebar-text: #f8fbff;
    --color-sidebar-link: #d8ddd8;
    --color-sidebar-link-hover-bg: rgba(255, 255, 255, 0.06);
    --color-topbar-bg: rgba(24, 30, 35, 0.9);
    --color-topbar-border: rgba(243, 238, 232, 0.08);
    --color-public-nav-bg: rgba(20, 26, 31, 0.92);
    --color-public-nav-text: #fffdf9;
    --color-public-footer-bg: #141a1f;
    --color-public-footer-text: #f3eee8;
    --color-public-footer-link: #d9f0e4;
    --color-cookie-bg: #232d35;
    --color-cookie-title: #f3eee8;
    --color-cookie-copy: #aba195;
    --color-cookie-option-bg: #1e252b;
    --color-card-surface: rgba(32, 40, 46, 0.94);
    --color-card-border: rgba(70, 81, 90, 0.82);
    --color-stat-border: rgba(70, 81, 90, 0.82);
    --color-table-head-bg: rgba(26, 33, 38, 0.98);
    --color-table-head-border: rgba(70, 81, 90, 0.72);
    --color-table-head-text: #d7cec4;
    --color-table-row-text: #f0eae3;
    --color-table-row-border: rgba(70, 81, 90, 0.62);
    --color-table-row-alt-bg: rgba(255, 255, 255, 0.015);
    --color-table-row-hover-bg: rgba(31, 138, 91, 0.12);
    --color-activity-feed-border: rgba(73, 84, 93, 0.65);
    --color-screenshot-border: rgba(73, 84, 93, 0.88);
    --color-screenshot-bg: #232c33;
    --color-placeholder-border: #46515a;
    --color-placeholder-bg: #1b2329;
    --color-placeholder-text: #c2b7ab;
    --color-timeline-chip-bg: rgba(35, 45, 53, 0.92);
    --color-timeline-chip-border: #49545d;
    --color-timeline-chip-hover-bg: #273138;
    --color-timeline-chip-hover-border: #8fd0ad;
    --color-timeline-chip-active-bg: rgba(31, 138, 91, 0.16);
    --color-timeline-chip-active-border: rgba(143, 208, 173, 0.34);
    --color-timeline-chip-text: #f0eae3;
    --color-timeline-chip-subtle-text: #c2b7ab;
    --color-timeline-chip-count-text: #c2b7ab;
    --color-timeline-row-bg: rgba(35, 45, 53, 0.92);
    --color-timeline-row-border: #364048;
    --color-timeline-label: #f0eae3;
    --color-timeline-meta: #aba195;
    --color-timeline-empty: #c2b7ab;
    --color-timeline-stat-strong: #fffdf9;
    --color-timeline-stat-text: #ddd3ca;
    --color-timeline-stat-label: #aba195;
    --color-usage-title-text: #8fd0ad;
    --color-usage-title-alt-text: #d1ad72;
    --color-usage-title-border: rgba(73, 84, 93, 0.82);
    --color-usage-item-text: #f0eae3;
    --color-usage-value-text: #c2b7ab;
    --color-inline-code-bg: #242d34;
    --color-timeline-bar-bg: #364048;
    --color-timeline-bar-fill: linear-gradient(90deg, #57a978 0%, #b88a44 100%);
    --color-badge-on-dark: rgba(255, 255, 255, 0.12);
    --gradient-hero: linear-gradient(180deg, #171d22 0%, #1d242a 100%);
    --gradient-card-header: linear-gradient(135deg, #2a353d 0%, #202830 100%);
    --color-auth-card-subtitle: rgba(243, 238, 232, 0.78);
    --gradient-auth-pane: linear-gradient(180deg, rgba(35, 45, 53, 0.96) 0%, rgba(23, 29, 34, 0.96) 100%);
}