@font-face {
    font-family: "Helvetica";
    src: url("/static/fonts/Helvetica.ttf") format("truetype");
}

:root {
    --font-family-base: "Helvetica", Arial, sans-serif;
    --state-0-bg: var(--red-600);
    --state-0-fg: var(--blue-50);
    --state-1-bg: #f9ab00;
    --state-1-fg: #111;
    --state-2-bg: var(--emerald-800);
    --state-2-fg: #111;

    /*Body background*/
    --body-bg: var(--cyan-600);

    /* View-level tokens */
    --full-bg: var(--state-0-bg);
    --full-fg: var(--state-0-fg);
    --available-bg: var(--teal-700);
    --available-fg: var(--indigo-50);

    /* Public roster (unauthenticated) neutral styling */
    --public-roster-cell-bg: var(--cyan-900);
    --public-roster-cell-fg: var(--cyan-50);

    /* Sunday theme */
    --sunday-bg: var(--pink-200);
    --sunday-fg: #4a1f33;

    /* Action tokens (strong, accessible green for ready actions) */
    --ready-bg: var(--emerald-500);
    --ready-fg: var(--emerald-50);
    --ready-border: var(--emerald-900);

    /* Semantic surfaces */
    --surface-bg: var(--indigo-50);
    --surface-border: var(--indigo-200);
    --surface-elevated-bg: var(--indigo-50);
    --surface-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

    /* Semantic text tokens */
    --text-primary: var(--indigo-900);
    --text-muted: var(--indigo-700);
    --text-inverse: var(--indigo-50);

    /* Sidebar (reader) */
    --sidebar-bg: var(--surface-bg);
    --sidebar-border: var(--surface-border);
    --sidebar-text: var(--text-primary);

    /* Dialogs */
    --dialog-bg: var(--surface-bg);
    --dialog-border: var(--surface-border);
    --dialog-backdrop: rgba(0, 0, 0, 0.2);

    /* FAB (floating action) */
    --fab-bg: var(--surface-bg);
    --fab-border: var(--surface-border);
    --fab-text: var(--text-primary);
}

.shift {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.shift.is-0 {
    background: var(--state-0-bg);
    color: var(--state-0-fg);
}
.shift.is-1 {
    background: var(--state-1-bg);
    color: var(--state-1-fg);
}
.shift.is-2 {
    background: var(--state-2-bg);
    color: var(--state-2-fg);
}

.btn--ready {
    background: var(--ready-bg) !important;
    color: var(--ready-fg) !important;
    border-color: var(--ready-border) !important;
}