@font-face {
    font-family: "Poppins";
    font-weight: 400;
    src: url("../fonts/poppins-400.woff2");
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    font-weight: 500;
    src: url("../fonts/poppins-500.woff2");
    font-display: swap;
}

:root {
    --color-background: #f7f8fa;
    --color-surface: #ffffff;
    --color-text: #1f232b;
    --color-text-muted: #5f6673;
    --color-icon: #4f5663;
    --color-border: #1018281f;
    --color-border-strong: #10182838;
    --color-fill: #1018280b;
    --color-fill-strong: #10182815;
    --color-backdrop: #10182847;
    --color-scrollbar: #b7bcc5;

    --color-accent: #3563e9;
    --color-accent-hover: #2952cc;
    --color-accent-soft: #3563e91f;

    --color-on-accent: #ffffff;

    --color-success: #18794e;
    --color-danger: #cd2b31;
    --color-warning: #a34a06;

    --color-on-status: #ffffff;

    --color-tag-red: #fbdadd;
    --color-tag-blue: #d6e6fc;
    --color-tag-green: #d3f0e0;
    --color-tag-violet: #eadcfb;

    --color-on-tag: #262a33;

    --color-match: #fde68a;
    --color-match-current: #fdba74;

    --color-on-match: #1f232b;

    --color-wave: #9aa1ad;
    --color-playhead: #e5484d;
    --color-selection: var(--color-accent-soft);

    --font-sans: "Poppins", system-ui, sans-serif;

    --font-weight-strong: 500;

    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;

    --text-control: var(--text-md);

    --leading-tight: 1.25;
    --leading-normal: 1.5;

    --space-1: 0.3rem;
    --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;

    --control-height: 2.25rem;
    --control-padding: 0.875rem;

    --item-height: 2rem;

    --icon-button-size: 1.5rem;

    --dialog-padding-y: var(--space-7);
    --dialog-padding-x: var(--space-8);

    --panel-padding: var(--space-4);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 999px;

    --border: 1px solid var(--color-border);

    --opacity-disabled: 0.5;

    --shadow-md: 0 1px 2px #1018280f, 0 6px 20px #1018281f;
    --shadow-lg: 0 2px 6px #1018281a, 0 24px 64px #10182833;

    --duration-fast: 100ms;
    --duration-base: 150ms;
    --duration-slow: 250ms;

    --ease: cubic-bezier(0.2, 0, 0, 1);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --color-background: #1b1d21;
    --color-surface: #24272c;
    --color-text: #e3e5e9;
    --color-text-muted: #9aa1ad;
    --color-icon: #b4bac4;
    --color-border: #ffffff1f;
    --color-border-strong: #ffffff38;
    --color-fill: #ffffff0d;
    --color-fill-strong: #ffffff1a;
    --color-backdrop: #0000008c;
    --color-scrollbar: #4a4f58;

    --color-accent: #3d6cf0;
    --color-accent-hover: #2f5bd6;
    --color-accent-soft: #5b8cff2b;

    --color-danger: #d1343b;

    --color-tag-red: #4b2930;
    --color-tag-blue: #1e3653;
    --color-tag-green: #1d3f30;
    --color-tag-violet: #382a52;

    --color-on-tag: #e6e8ec;

    --color-match: #5e4c12;
    --color-match-current: #8f4a12;

    --color-on-match: #fff4dc;

    --color-wave: #737b88;
    --color-playhead: #ff6369;

    --shadow-md: 0 1px 2px #0000004d, 0 8px 24px #00000066;
    --shadow-lg: 0 2px 6px #0000004d, 0 24px 64px #00000080;

    color-scheme: dark;
}

@media (pointer: coarse) {
    :root {
        --control-height: 2.75rem;
        --text-control: 1rem;
        --item-height: 2.5rem;
        --icon-button-size: 2.25rem;
    }
}

@media (max-width: 560px) {
    :root {
        --dialog-padding-y: var(--space-6);
        --dialog-padding-x: var(--space-5);
        --panel-padding: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }
}