/* =================================================================
   CAPY//OS — base.css
   Design tokens, resets, typography, and shared textures.
   Loaded on every page before desktop.css / apps.css / game.css /
   mobile.css.
   ================================================================= */

:root {
    /* ---- Palette ---- */
    --capy-cream:       #F4E9D3;
    --capy-clay:        #B87943;
    --capy-espresso:    #241A14;
    --capy-teal:        #326B6B;
    --capy-amber:       #EFA33A;
    --capy-sage:        #8BAA8B;
    --capy-red:         #B84B3E;

    /* ---- Derived tones (tints/shades of the above, no new hues) ---- */
    --capy-cream-dim:    #EADFC9;
    --capy-cream-dimmer: #DFD3BB;
    --capy-clay-dark:    #8F5E33;
    --capy-clay-light:   #D3A171;
    --capy-espresso-70:  rgba(36, 26, 20, 0.7);
    --capy-espresso-45:  rgba(36, 26, 20, 0.45);
    --capy-espresso-20:  rgba(36, 26, 20, 0.2);
    --capy-espresso-10:  rgba(36, 26, 20, 0.1);
    --capy-teal-dark:    #22504F;
    --capy-teal-light:   #4C8B8A;
    --capy-amber-dark:   #C9852B;
    --capy-sage-dark:    #6E8F6E;
    --capy-red-dark:     #8E362B;
    --capy-paper-line:   rgba(36, 26, 20, 0.08);

    /* ---- Semantic ---- */
    --bg-desktop:        var(--capy-cream);
    --bg-window:         #FBF4E4;
    --bg-window-header:  var(--capy-clay);
    --text-primary:      var(--capy-espresso);
    --text-muted:        var(--capy-espresso-70);
    --text-inverse:      var(--capy-cream);
    --border-ink:        var(--capy-espresso);
    --accent:            var(--capy-teal);
    --accent-warm:       var(--capy-amber);
    --danger:            var(--capy-red);
    --success:           var(--capy-sage-dark);

    /* ---- Typography ---- */
    --font-display: Georgia, 'Times New Roman', 'Noto Serif', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Consolas',
                 'DejaVu Sans Mono', monospace;

    /* ---- Spacing scale ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* ---- Radii / borders (slightly imperfect, hand-built feel) ---- */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --border-width: 2px;

    /* ---- Shadows (flat, ink-style, no glassmorphism) ---- */
    --shadow-window: 4px 4px 0 var(--capy-espresso-20);
    --shadow-raised: 2px 2px 0 var(--capy-espresso-20);
    --shadow-pressed: inset 2px 2px 0 var(--capy-espresso-10);

    /* ---- Z-index scale ---- */
    --z-desktop: 1;
    --z-window-base: 100;
    --z-taskbar: 500;
    --z-start-menu: 600;
    --z-mascot: 700;
    --z-modal: 800;
    --z-boot: 900;

    color-scheme: light;
}

/* ---- Reduced motion respected globally ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background: var(--bg-desktop);
    color: var(--text-primary);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
}

img {
    max-width: 100%;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

ul, ol {
    padding-left: var(--sp-5);
}

a {
    color: var(--capy-teal-dark);
}

a:hover, a:focus-visible {
    color: var(--capy-teal);
}

/* ---- Focus visibility (accessibility requirement — never remove
   outline without replacing it) ---- */
:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--capy-teal);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Windows/buttons with dark backgrounds need a lighter focus ring
   for contrast — opt in with this class where needed. */
.focus-ring-light:focus-visible {
    outline-color: var(--capy-amber);
}

/* ---- Screen-reader-only utility ---- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/* NOTE: there is intentionally no generic [aria-live] visual rule
   here. aria-live is an accessibility attribute for screen readers
   and must NOT imply any visual styling — plenty of elements in
   this app (the boot sequence, the mascot notification area) are
   both visible AND live-announcing. The one element that needs to
   be screen-reader-only (#sr-announcer) already gets that via the
   explicit .sr-only class above, which is the correct way to hide
   something visually: by class, never by mere presence of an ARIA
   attribute. An earlier version of this file had a bare [aria-live]
   selector that clipped every live-announcing element in the app
   down to 1x1px, including fully visible UI regions — that rule is
   deliberately removed. Don't re-add it.

/* =================================================================
   Retro textures — all CSS-generated, no external images.
   ================================================================= */

/* Subtle paper grain via layered radial gradients. Applied to
   desktop background and window bodies. */
.tx-paper {
    background-image:
        radial-gradient(var(--capy-paper-line) 0.5px, transparent 0.5px),
        radial-gradient(var(--capy-paper-line) 0.5px, transparent 0.5px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 2px 4px;
}

/* CRT scanlines — toggled via .scanlines-on on <body> */
.scanlines-on::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        to bottom,
        rgba(36, 26, 20, 0.06) 0px,
        rgba(36, 26, 20, 0.06) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: no-preference) {
    .scanlines-on.scanlines-flicker::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9998;
        background: rgba(244, 233, 211, 0.02);
        animation: capy-flicker 6s infinite;
    }
}

@keyframes capy-flicker {
    0%, 96%, 100% { opacity: 0; }
    97% { opacity: 1; }
    98% { opacity: 0; }
}

/* Ink-outline border style used across windows/buttons/icons for
   the "slightly imperfect hand-built" look. */
.ink-border {
    border: var(--border-width) solid var(--border-ink);
    border-radius: var(--radius-md);
}

/* Small pixel-corner accent — decorative, aria-hidden where used */
.pixel-corner {
    width: 6px;
    height: 6px;
    background: var(--border-ink);
}

/* =================================================================
   Buttons — original, no OS trademark styling
   ================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    background: var(--capy-cream);
    color: var(--text-primary);
    border: var(--border-width) solid var(--border-ink);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--shadow-raised);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    text-decoration: none;
    line-height: 1.2;
}

.btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--capy-espresso-20);
}

.btn:active {
    transform: translate(1px, 1px);
    box-shadow: var(--shadow-pressed);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-primary {
    background: var(--capy-teal);
    color: var(--text-inverse);
    border-color: var(--capy-espresso);
}

.btn-primary:hover {
    background: var(--capy-teal-dark);
}

.btn-amber {
    background: var(--capy-amber);
    border-color: var(--capy-espresso);
}

.btn-danger {
    background: var(--capy-red);
    color: var(--text-inverse);
    border-color: var(--capy-espresso);
}

.btn-ghost {
    background: transparent;
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--capy-espresso-10);
    transform: none;
    box-shadow: none;
}

.btn-icon {
    padding: var(--sp-2);
    width: 34px;
    height: 34px;
    justify-content: center;
}

.btn-sm {
    padding: var(--sp-1) var(--sp-3);
    font-size: 0.85rem;
}

/* ---- Form controls ---- */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.field label {
    font-weight: 600;
    font-size: 0.85rem;
}

.field input[type="text"],
.field input[type="search"],
.field textarea,
.field select {
    padding: var(--sp-2) var(--sp-3);
    border: var(--border-width) solid var(--border-ink);
    border-radius: var(--radius-sm);
    background: var(--capy-cream);
    color: var(--text-primary);
}

.field-error {
    color: var(--capy-red-dark);
    font-size: 0.82rem;
    font-weight: 600;
}

.field-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ---- Badges / tags ---- */
.badge {
    display: inline-block;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--capy-sage);
}

.badge-amber { background: var(--capy-amber); }
.badge-red { background: var(--capy-red); color: var(--text-inverse); }
.badge-teal { background: var(--capy-teal); color: var(--text-inverse); }

/* ---- Utility ---- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.visually-hide { display: none !important; }

/* ---- No horizontal overflow anywhere ---- */
html, body {
    max-width: 100%;
}