/* i4U design tokens — single source of truth for admin panel */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* Theme-independent layout + brand (must exist in light AND dark) */
html {
    /* Typography — Inter is the open substitute for Cursor’s UI */
    --i4u-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --i4u-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Geometry */
    --i4u-sidebar-width: 183px;
    --i4u-sidebar-collapsed-width: 64px;
    --i4u-topbar-height: 48px;
    --i4u-rail-height: 55px;
    --i4u-sidebar-margin: 12px;
    --i4u-sidebar-gap: 12px;
    --i4u-sidebar-radius: 16px;
    --i4u-sidebar-offset: calc(var(--i4u-sidebar-margin) + var(--i4u-sidebar-width) + var(--i4u-sidebar-gap));
    --i4u-sidebar-collapsed-offset: calc(var(--i4u-sidebar-margin) + var(--i4u-sidebar-collapsed-width) + var(--i4u-sidebar-gap));

    /* Radius */
    --i4u-radius-sm: 8px;
    --i4u-radius-md: 10px;
    --i4u-radius-lg: 16px;
    --i4u-radius-pill: 9999px;

    /* Spacing */
    --i4u-shell-margin: var(--i4u-sidebar-margin);
    --i4u-page-padding: var(--i4u-shell-margin);
    --i4u-container-padding: var(--i4u-shell-margin);
    /* Scroll area: equal inset on both sides of the thumb */
    --i4u-scroll-rail-edge: 2px;
    --i4u-scroll-rail-width: 5px;
    --i4u-scroll-rail-size: calc(var(--i4u-container-padding) - var(--i4u-scroll-rail-edge));
    --i4u-scroll-rail-content-gap: 1px;
    --i4u-scroll-rail-gap: var(--i4u-scroll-rail-edge);

    /* Brand / accent (shared) */
    --i4u-primary: #25ab7c;
    --i4u-primary-dark: #1a8560;
    --i4u-primary-hover: #1f9469;
    --i4u-secondary: #5e4b8b;
    --i4u-secondary-hover: #6d5aa3;

    /* Status (shared) */
    --i4u-danger: #ff453a;
    --i4u-warning: #ffd60a;
    --i4u-success: #30d158;
    --i4u-info: #0a84ff;

    /* Учебный план / мобильные «Сервисы» (analytics, tests, subjects, shop) */
    --i4u-curriculum-video: #4fb1ba;
    --i4u-curriculum-test: #5cb36d;
    --i4u-curriculum-zachet-weekly: #a349c7;
    --i4u-curriculum-zachet-module: #c54b3e;

    /* UI controls (shared) */
    --i4u-switch-knob: #ffffff;
    --i4u-text-on-primary: #ffffff;
}

html:not([data-theme="light"]),
[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces */
    --i4u-bg-app: #141416;
    --i4u-bg-surface: #1c1c1e;
    --i4u-bg-elevated: #2c2c2e;
    --i4u-bg-input: #2c2c2e;
    --i4u-bg-hover: #3a3a3c;
    --i4u-bg-muted: #252528;
    --i4u-bg-inset: #1f1f22;

    /* Borders */
    --i4u-border: #2c2c2e;
    --i4u-border-strong: #3a3a3c;
    --i4u-border-hover: #636366;
    --i4u-border-subtle: #48484a;

    /* Text */
    --i4u-text-primary: #e5e5ea;
    --i4u-text-secondary: #98989d;
    --i4u-text-muted: #8e8e93;
    --i4u-text-icon: #a1a1a6;
    --i4u-text-accent: #6db896;

    /* Links */
    --i4u-link: #4db88a;
    --i4u-link-hover: #6db896;

    /* Sidebar states */
    --i4u-sidebar-text: #e5e5ea;
    --i4u-sidebar-icon: #a1a1a6;
    --i4u-sidebar-active-bg: #1a8560;
    --i4u-sidebar-active-text: #34c88f;
    --i4u-sidebar-hover-outline: rgba(37, 171, 124, 0.42);
    --i4u-sidebar-hover-text: #6db896;
    --i4u-sidebar-hover-icon: #5aa882;

    /* Badges */
    --i4u-badge-bg: rgba(255, 255, 255, 0.08);
    --i4u-badge-border: transparent;

    /* Effects */
    --i4u-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --i4u-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.35);
    --i4u-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --i4u-overlay: rgba(28, 28, 30, 0.85);
    --i4u-backdrop: rgba(0, 0, 0, 0.5);
    --i4u-focus-ring: rgba(37, 171, 124, 0.45);
    --i4u-scrollbar-thumb: #48484a;
    --i4u-scrollbar-thumb-hover: #636366;
}

html[data-theme="light"],
[data-theme="light"] {
    color-scheme: light;

    --i4u-bg-app: #f2f2f7;
    --i4u-bg-surface: #ffffff;
    --i4u-bg-elevated: #f5f5f7;
    --i4u-bg-input: #ffffff;
    --i4u-bg-hover: #ebebf0;
    --i4u-bg-muted: #ebebf0;
    --i4u-bg-inset: #f5f5f7;

    --i4u-border: #e5e5ea;
    --i4u-border-strong: #d1d1d6;
    --i4u-border-hover: #aeaeb2;
    --i4u-border-subtle: #c7c7cc;

    --i4u-text-primary: #1c1c1e;
    --i4u-text-secondary: #636366;
    --i4u-text-muted: #8e8e93;
    --i4u-text-icon: #636366;
    --i4u-text-accent: #1a8560;

    --i4u-link: #1a8560;
    --i4u-link-hover: #1f9469;

    --i4u-sidebar-active-bg: #1a8560;
    --i4u-sidebar-text: #1c1c1e;
    --i4u-sidebar-icon: #636366;
    --i4u-sidebar-active-text: #1a9c6f;
    --i4u-sidebar-hover-outline: rgba(37, 171, 124, 0.28);
    --i4u-sidebar-hover-text: #1f9469;
    --i4u-sidebar-hover-icon: #25ab7c;

    --i4u-badge-bg: rgba(0, 0, 0, 0.04);
    --i4u-badge-border: var(--i4u-border-strong);

    --i4u-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --i4u-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
    --i4u-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --i4u-overlay: rgba(255, 255, 255, 0.85);
    --i4u-backdrop: rgba(0, 0, 0, 0.35);
    --i4u-focus-ring: rgba(37, 171, 124, 0.35);
    --i4u-scrollbar-thumb: #c7c7cc;
    --i4u-scrollbar-thumb-hover: #aeaeb2;

    /* Remap legacy app.css --sg-* vars so navbar/tables follow light tokens */
    --sg-dark: var(--i4u-bg-surface);
    --sg-body-bg-color: var(--i4u-bg-app);
    --sg-table-border-color: var(--i4u-border-strong);
    --sg-table-header-bg-color: var(--i4u-bg-muted);
    --sg-sidebar-menu-active: var(--i4u-sidebar-active-bg);
}