:root {
    --secanda-dark-violet: #42184f;
    --secanda-violet: #651265;
    --secanda-bright-violet: #962a86;
    --secanda-background-positive: #ebebeb;

    --lumo-primary-color: var(--secanda-dark-violet);
    --lumo-primary-color-60pct: hsla(298, 56%, 38%, 0.7);
    --lumo-primary-color-50pct: hsla(294, 56%, 38%, 0.5);
    --lumo-primary-color-20pct: hsla(292, 56%, 38%, 0.2);
    --lumo-primary-color-10pct: hsla(294, 56%, 38%, 0.1);
    --lumo-primary-text-color: hsl(0, 0%, 39%);
    --lumo-header-text-color: var(--secanda-violet);
    --lumo-clickable-cursor: pointer;

    --lumo-success-text-color: darkgreen;
    --lumo-error-text-color: darkred;

    --nav-color-start: rgba(115, 4, 205, 0.03);
    --nav-color-middle: rgba(255, 136, 0, 0.03);
    --nav-color-end: #f9f9f9;
    --nav-color-bg: white;

    --lumo-font-family: InterVariable, sans-serif;

    font-family: "InterVariable", sans-serif;
    font-optical-sizing: auto;
}

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

/* Generic helper classes */

.clickable-cursor {
    cursor: var(--lumo-clickable-cursor);
}


/* Background gradients */

.background-gradient-intense {
    background: radial-gradient(ellipse, transparent 0%, transparent 70%, white 100%),
    conic-gradient(from 0deg at center,
            rgba(125, 18, 117, 0.15) 0deg,
            rgba(169, 9, 100, 0.15) 90deg,
            rgba(222, 49, 82, 0.15) 180deg,
            rgba(255, 159, 49, 0.15) 270deg,
            rgba(125, 18, 117, 0.15) 360deg
    ),
    white;
}

.background-gradient-medium {
    background: radial-gradient(ellipse, transparent 0%, transparent 40%, white 100%),
    conic-gradient(from 0deg at center,
            rgba(125, 18, 117, 0.15) 0deg,
            rgba(169, 9, 100, 0.15) 90deg,
            rgba(222, 49, 82, 0.15) 180deg,
            rgba(255, 159, 49, 0.15) 270deg,
            rgba(125, 18, 117, 0.15) 360deg
    ),
    white;
}

/* Vaadin components */

vaadin-app-layout::part(navbar) {
    background: linear-gradient(90deg, var(--nav-color-start) 0%, var(--nav-color-middle) 50%, var(--nav-color-end) 100%), var(--nav-color-bg);
}

vaadin-app-layout::part(drawer) {
    background: linear-gradient(180deg, var(--nav-color-start) 0%, var(--nav-color-middle) 50%, var(--nav-color-end) 100%), var(--nav-color-bg);
    overflow: hidden;
}

vaadin-dialog::part(overlay) {
    box-shadow: none;
}

vaadin-grid::part(empty-state) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


/* Dashboard */

.dashboard-card {
    background: #ffffffdd;
}

.dashboard-card:first-child {
    border-radius: var(--lumo-border-radius-l) var(--lumo-border-radius-l) 0 0;
}

.dashboard-card:last-child {
    border-radius: 0 0 var(--lumo-border-radius-l) var(--lumo-border-radius-l);
}

.dashboard-card-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.dashboard-card-clickable:hover {
    background: #ffffff88;
}