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

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

@font-feature-values "Inter" {
    @character-variant {
        cv01: 1;
        cv02: 2;
        cv03: 3;
        cv04: 4;
        cv05: 5;
        cv06: 6;
        cv07: 7;
        cv08: 8;
        cv09: 9;
        cv10: 10;
        cv11: 11;
        cv12: 12;
        cv13: 13;
        alt-1: 1; /* Alternate one */
        alt-3: 9; /* Flat-top three */
        open-4: 2; /* Open four */
        open-6: 3; /* Open six */
        open-9: 4; /* Open nine */
        lc-l-with-tail: 5; /* Lower-case L with tail */
        simplified-u: 6; /* Simplified u */
        alt-double-s: 7; /* Alternate German double s */
        uc-i-with-serif: 8; /* Upper-case i with serif */
        uc-g-with-spur: 10; /* Capital G with spur */
        single-story-a: 11; /* Single-story a */
        compact-lc-f: 12; /* Compact f */
        compact-lc-t: 13; /* Compact t */
    }
    @styleset {
        ss01: 1;
        ss02: 2;
        ss03: 3;
        ss04: 4;
        ss05: 5;
        ss06: 6;
        ss07: 7;
        ss08: 8;
        open-digits: 1; /* Open digits */
        disambiguation: 2; /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3; /* Round quotes & commas */
        square-punctuation: 7; /* Square punctuation */
        square-quotes: 8; /* Square quotes */
        circled-characters: 5; /* Circled characters */
        squared-characters: 6; /* Squared characters */
    }
}

/* Apply Inter font */
html,
body {
    font-family:
        -apple-system, BlinkMacSystemFont, "Adwaita Sans", "Inter",
        "Helvetica Neue", sans-serif !important;
    font-variant-alternates: character-variant(lc-l-with-tail);
}

/* Catppuccin Latte (Light) */
:root {
    --blue: #8960bf;
    --dark-blue: #8960bf;
    --red: #d20f39;
    --dark-red: #e64553;
    --moon-grey: #ccd0da;

    --icon-red: #d20f39;
    --icon-orange: #fe640b;
    --icon-yellow: #df8e1d;
    --icon-green: #40a02b;
    --icon-blue: #8960bf;
    --icon-violet: #8839ef;

    --item-selected: white;

    --action: #8c8fa1;

    --background: #eff1f5;
    --surfacePrimary: #e6e9ef;
    --surfaceSecondary: #ccd0da;
    --divider: rgba(0, 0, 0, 0.05);
    --iconPrimary: #8960bf;
    --iconSecondary: #ffffff;
    --iconTertiary: #9ca0b0;
    --textPrimary: #4c4f69;
    --textSecondary: #000000;
    --hover: rgba(0, 0, 0, 0.1);
    --borderPrimary: rgba(0, 0, 0, 0.1);
    --borderSecondary: rgba(0, 0, 0, 0.2);
    --dividerPrimary: rgba(255, 255, 255, 0.4);
    --dividerSecondary: rgba(255, 255, 255, 0.9);

    --input-red: #f2cdcd;
    --input-green: #b5e2c7;

    accent-color: #8960bf;
}

/* Catppuccin Mocha (Dark) */
:root.dark {
    --input-red: #f38ba8;
    --input-green: #a6e3a1;

    --action: #cdd6f4;

    --background: #181825;
    --surfacePrimary: #1e1e2e;
    --surfaceSecondary: #313244;
    --textPrimary: #cdd6f4;
    --textSecondary: #fcfcfc;
    --divider: rgba(255, 255, 255, 0.12);
    --iconPrimary: #cdd6f4;
    --iconSecondary: #cdd6f4;
    --iconTertiary: #6c7086;
    --hover: rgba(255, 255, 255, 0.1);
    --borderPrimary: rgba(255, 255, 255, 0.05);
    --borderSecondary: rgba(255, 255, 255, 0.15);
    --dividerPrimary: rgba(30, 30, 30, 0.4);
    --dividerSecondary: rgba(30, 30, 30, 0.6);
}

/* Rounded corners */
:root {
    --border-radius-xs: 0.25em;
    --border-radius-sm: 0.5em;
    --border-radius-md: 0.75em;
    --border-radius-lg: 1em;
}

/* Cards & floating modals */
.card,
.card.floating {
    border-radius: var(--border-radius-md) !important;
}

/* Login form panel */
#login form {
    border-radius: var(--border-radius-lg) !important;
}

/* Buttons & form inputs */
button,
.button,
input,
select,
textarea {
    border-radius: var(--border-radius-sm) !important;
}

/* File listing items (mosaic/grid view) */
#listing.mosaic .item {
    border-radius: var(--border-radius-md) !important;
}

/* File listing items (list view) — round top/bottom of first/last */
#listing.list :nth-child(3) .item:first-child {
    border-top-left-radius: var(--border-radius-md) !important;
    border-top-right-radius: var(--border-radius-md) !important;
}
#listing.list :nth-last-child(5) .item:last-child {
    border-bottom-left-radius: var(--border-radius-md) !important;
    border-bottom-right-radius: var(--border-radius-md) !important;
}

/* Context menu */
.context-menu {
    border-radius: var(--border-radius-sm) !important;
}
.context-menu .action {
    border-radius: var(--border-radius-sm) !important;
}

/* Search bar */
#search #input {
    border-radius: var(--border-radius-md) !important;
}

/* Toasts */
.Vue-Toastification__toast {
    border-radius: var(--border-radius-md) !important;
}

/* Dropdown modal */
.dropdown-modal-container .dropdown-modal {
    border-radius: var(--border-radius-sm) !important;
}

/* Header dropdowns */
#dropdown .action {
    border-radius: 0 !important;
}
#dropdown {
    border-radius: var(--border-radius-sm) !important;
}

/* Upload files card */
.upload-files .card.floating {
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0 !important;
}

/* Dashboard panels & tables */
.dashboard .card {
    border-radius: var(--border-radius-md) !important;
}

/* Copy tooltip */
.card#share .action.copy-clipboard::after {
    border-radius: var(--border-radius-sm) !important;
}

/* Breadcrumb links */
.breadcrumbs a {
    border-radius: var(--border-radius-sm) !important;
}

/* File thumbnails */
#listing .item img {
    border-radius: var(--border-radius-xs) !important;
}

/* File thumbnails in gallery view */
#listing.mosaic.gallery .item div {
    border-radius: var(--border-radius-xs) !important;
}

/* Focus ring on modal buttons */
#modal-background .button:focus {
    outline: 1px solid #8960bf2d !important;
}

/* Sidebar disk usage progress bar */
.vue-simple-progress-bar {
    background: #8960bf !important;
}

/* Share page icon */
.share__box__icon i {
    color: #8960bf !important;
}

/* Top loading progress bar & upload progress bar */
.progress div,
.upload-files .file .file-progress div {
    background-color: #8960bf !important;
}

/* Inline code snippets */
li code,
p code {
    border-radius: var(--border-radius-md) !important;
}

/* Settings file list rows */
.file-list li {
    border-radius: var(--border-radius-md) !important;
}

/* Full-width card action buttons */
.card .card-action.full .action {
    border-radius: var(--border-radius-md) !important;
}

/* Share page boxes */
.share__box {
    border-radius: var(--border-radius-md) !important;
}

/* QR code */
.share__box__center canvas {
    border-radius: var(--border-radius-sm);
    border: 5px solid #fff;
}

/* Push QR code below download button in folder view */
.share__box__element.share__box__center > a + canvas {
    display: block;
    margin: 0.5em auto 0;
}