/* ClassSlate shared papercut design language */
:root {
    --cs-paper-bg: #faf9f5;
    --cs-paper-surface: #fffefb;
    --cs-paper-ink: #2d3436;
    --cs-paper-muted: #636e72;
    --cs-paper-outline: #2d3436;
    --cs-paper-shadow: #cbd0cd;
    --cs-paper-coral: #e17055;
    --cs-paper-coral-strong: #d35e45;
    --cs-paper-yellow: #ffeaa7;
    --cs-paper-pink: #ffd6d6;
    --cs-paper-green: #d4edda;
    --cs-paper-blue: #d6e9ff;
    --cs-paper-purple: #e8dcff;
    --cs-paper-radius: 14px;
    --cs-paper-radius-sm: 10px;
    --cs-paper-border: 2px solid var(--cs-paper-outline);
    --cs-paper-shadow-sm: 2px 2px 0 var(--cs-paper-shadow);
    --cs-paper-shadow-md: 4px 4px 0 var(--cs-paper-shadow);
    --cs-paper-shadow-lg: 7px 7px 0 var(--cs-paper-shadow);
    --cs-paper-focus: #355f78;
}

.cs-paper-surface {
    background: var(--cs-paper-surface);
    border: var(--cs-paper-border);
    border-radius: var(--cs-paper-radius);
    box-shadow: var(--cs-paper-shadow-md);
}

.cs-paper-button {
    border: var(--cs-paper-border);
    border-radius: var(--cs-paper-radius-sm);
    box-shadow: var(--cs-paper-shadow-sm);
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.cs-paper-button:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--cs-paper-shadow);
}

.cs-paper-icon-tile {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: var(--cs-paper-border);
    border-radius: 11px;
    box-shadow: var(--cs-paper-shadow-sm);
}

.cs-paper-tabs {
    padding: 4px;
    background: var(--cs-paper-surface);
    border: var(--cs-paper-border);
    border-radius: var(--cs-paper-radius);
    box-shadow: var(--cs-paper-shadow-sm);
}

.cs-paper-button:focus-visible,
.cs-paper-surface a:focus-visible,
.cs-paper-surface button:focus-visible,
.cs-paper-tabs button:focus-visible {
    outline: 3px solid var(--cs-paper-focus);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .cs-paper-button {
        transition: none;
    }

    .cs-paper-button:hover {
        transform: none;
    }
}