/* ======================
   GLOBAL
   ====================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

:root {
    --warm-white: #f7f5f2;
    --warm-grey: #e8e4df;
    --text-primary: #3d3a36;
    --text-muted: #8a847c;
    --accent: #c49a78;
    --accent-rgb: 196, 154, 120;
    --accent-active: #b8895e;
    --accent-subtle: rgba(196, 154, 120, 0.1);
    --accent-subtle-hover: rgba(196, 154, 120, 0.15);
    --success: #8faa7e;
    --error: #a85a4a;

    --text-hero: 2.2rem;
    --text-subheading: 1.35rem;
    --text-body: 1.2rem;
    --text-button: 1.1rem;
    --text-caption: 1.0rem;
    --text-small: 0.8rem;
    --text-detail: 0.7rem;

    --overlay-bg: rgba(247, 245, 242, 0.75);
    --overlay-bg-heavy: rgba(247, 245, 242, 0.92);
    --overlay-bg-opaque: rgba(247, 245, 242, 0.97);
    --overlay-bg-dark: rgba(0, 0, 0, 0.7);
    --modal-width: 300px;
    --info-attention: #5a8a5a;

    --blur-backdrop: blur(8px);

    --title-y: 25vh;

    --ls-heading: 0.12em;
    --ls-button: 0.1em;
    --ls-body: 0.08em;
    --ls-caption: 0.05em;

    /* Spacing scale */
    --space-2xs: 0.25rem;  /* 4px */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 0.75rem;   /* 12px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 2.5rem;   /* 40px */
    --space-3xl: 3.5rem;   /* 56px */

    /* Transition timing */
    --duration-instant: 0.06s;
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-medium: 0.4s;
    --duration-slow: 0.6s;

    /* Border radius */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-pill: 20px;
    --radius-full: 50%;

    /* Z-index layers */
    --z-hint: 1;
    --z-base: 1;
    --z-content: 3;
    --z-controls: 4;
    --z-header: 5;
    --z-entry: 10;
    --z-flash: 15;
    --z-footer: 20;
    --z-overlay: 50;
    --z-notification: 55;
    --z-admin-toggle: 60;
    --z-admin-panel: 65;
    --z-toast: 80;
    --z-palette: 102;
    --z-top: 200;
    --z-audio-resume: 300;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Cormorant', Georgia, serif;
    font-weight: 400;
    background: var(--warm-white);
    color: var(--text-primary);
    position: relative;
}

/* Subtle paper texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}