/* ==========================================================================
   1. GEIST SANS (For body text and headings)
   ========================================================================== */
@font-face {
    font-family: 'Geist Sans';
    src: url('./fonts/geist-sans/Geist-Variable.woff2') format('woff2-variations'),
        url('./fonts/geist-sans/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Sans';
    src: url('./fonts/geist-sans/Geist-VariableItalic.woff2') format('woff2-variations'),
        url('./fonts/gesit-sans/Geist-VariableItalic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   2. GEIST MONO (For code and technical UI elements)
   ========================================================================== */
@font-face {
    font-family: 'Geist Mono';
    src: url('./fonts/geist-mono/GeistMono-Variable.woff2') format('woff2-variations'),
        url('./fonts/geist-mono/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('./fonts/geist-mono/GeistMono-VariableItalic.woff2') format('woff2-variations'),
        url('./fonts/gesit-mono/GeistMono-VariableItalic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   3. GEIST PIXEL (For display headings or retro styling)
   ========================================================================== */
@font-face {
    font-family: 'Geist Pixel';
    src: url('./fonts/geist-pixel/GeistPixel-Square.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}



:root {
    /* ==========================================================================
         1. ORIGINAL THEME COLORS
         ========================================================================== */
    --ink: #242119;
    --paper: #EFEADA;
    --paper-soft: #E6DFC9;
    --brass: #AD803B;
    --pine: #33463A;
    --line: rgba(36, 33, 25, 0.14);
    --paper-d: #dcd3b59e;
    --rust: #9C5A38;

    /* ==========================================================================
         2. COMPATIBLE EXTENSIONS
         ========================================================================== */

    /* Deep Tones & Shadows (Headings, dark UI, high contrast) */
    --charcoal-warm: #332F26;
    --oxblood: #4A2522;
    --forest-deep: #1E2A21;
    --espresso: #3D2E24;

    /* Muted Mid-Tones (Secondary text, borders, icons) */
    --moss: #556B52;
    --clay: #8C6D58;
    --ochre: #B8860B;
    --sage: #8A9A86;

    /* Warm Accents & Highlights (CTAs, links, badges, states) */
    --gold-leaf: #D4A356;
    --terracotta: #B35D46;
    --amber: #C97D34;
    --copper: #A0522D;
    --gold-leaf-tint: #ba893ba2;
    /* Light Backgrounds & Sheets (Cards, panels, inputs) */
    --parchment: #F9F7F0;
    --alabaster: #F0EAE1;
    --sand: #DFD8C4;

    /* ==========================================================================
         3. ALPHA TINTS (Transparencies for hovers, selections, overlays)
         ========================================================================== */
    --ink-tint-hover: rgba(36, 33, 25, 0.05);
    --ink-tint-focus: rgba(36, 33, 25, 0.08);
    --brass-tint-select: rgba(173, 128, 59, 0.15);
    --pine-tint-soft: rgba(51, 70, 58, 0.10);
    --terracotta-tint: rgba(179, 93, 70, 0.12);

    --bg: #f2f4f6;
    --card: #ffffff;
    --ink: #18212b;
    --muted: #5d6b79;
    --line: #d9dfe5;
    --available: #1f8a4c;
    --on-available: #ffffff;
    --occupied: #c8372d;
    --on-occupied: #ffffff;
    --cleaning: #e3a82b;
    --on-cleaning: #2b1d00;
    --closed: #586474;
    --on-closed: #ffffff;
    --other: #7a4fb5;
    --on-other: #ffffff;
}


* {
    box-sizing: border-box;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
    /* Standard */
    -webkit-touch-callout: none;
    /* Prevents iOS context menu */
}

/* Universal defaults */
body {
    font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: "liga" 1, "calt" 1, "ss02" 1;
    /* Enables Swiss geometry hooks */
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
}

/* Code structures automatically get the Mono look */
code,
pre {
    font-family: 'Geist Mono', monospace;
    /* Vercel default code feature overrides: zero with a dot/slash, tabular numbers */
    font-feature-settings: "liga" 0, "calt" 0, "zero" 1, "tnum" 1;
}

/* Pixel variant for headers, hero titles, or retro banners */
.hero-title {
    font-family: 'Geist Pixel', monospace;
}

/* Testing the Variable font weight ranges */
h1 {
    font-weight: 600;
    font-size: 48px;
}

/* Triggers Black without a separate file */
h2 {
    font-weight: 500;
    font-size: 48px;
}

/* Triggers Bold */
p {
    font-weight: 400;
}

/* Triggers Regular */


a {
    color: inherit;
}

input {
    width: 100%;
    padding: 11px 12px;
    font-size: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    margin-bottom: 12px;
    font-family: 'Geist Sans', sans-serif;
}

/** -- Buttons -- **/
button {
    border-radius: 10%;
    cursor: pointer;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

html {
    visibility: hidden;
    opacity: 0;
}

/** Loader **/
.center-load {
    margin: 0 auto;
    padding: 3em;

    .msg-load {
        max-width: fit-content;
        margin-inline: auto;
    }
}

.spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 3px solid var(--line);
    border-top-color: var(--brass);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}