/* ============================================================
   Design Tokens - Halloween Seixal / "A Roda de Hogwarts"
   Single source of truth for color, type, spacing and breakpoints,
   shared by the public site (style.css, mapa.css) and both admin
   panels (admin.css, admin_mapa.css). Load this file first, before
   any feature stylesheet.
   ============================================================ */

:root {
    /* ---- Canonical palette (WCAG-checked against --color-bg) ---- */
    --color-bg: #0f0f23;
    --color-surface-1: #1e1b4b;
    --color-surface-2: #312e81;
    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    --color-gold: #ca8a04;
    --color-gold-bright: #f4d03f;
    --color-danger: #f43f5e;
    --color-success: #22c55e;
    --color-warning: #eab308;
    --color-text: #ffffff;
    --color-text-muted: #c7c5d9;
    --color-border: rgba(124, 58, 237, 0.35);

    /* ---- Map exception palette (deliberate: "Marauder's Map" parchment look) ---- */
    --map-parchment: #f4e8c1;
    --map-ink: #3b2a15;
    --map-brass: #8b6b3d;

    /* ---- Legacy aliases ----
       style.css / mapa.css / admin.css / admin_mapa.css already reference
       these names hundreds of times. Re-pointing them here re-themes the
       whole site from one file without a risky mass find/replace across
       every property declaration. Prefer the --color-* names above in any
       new CSS. */
    --primary-purple: var(--color-surface-1);
    --secondary-purple: var(--color-surface-2);
    --accent-purple: var(--color-surface-2);
    --dark-purple: var(--color-bg);
    --accent-yellow: var(--color-gold-bright);
    --golden-glow: var(--color-gold);
    --gold: var(--color-gold);
    --accent-orange: var(--color-danger);
    --border-orange: var(--color-danger);
    --border-yellow: var(--color-gold-bright);
    --text-light: var(--color-text);
    --text-gray: var(--color-text-muted);
    --nav-bg: rgba(15, 15, 35, 0.92);
    --fog-color: rgba(255, 255, 255, 0.08);
    --surface: rgba(30, 27, 75, 0.8);
    --surface-soft: rgba(124, 58, 237, 0.12);

    /* ---- Typography ---- */
    --font-display: 'Cinzel', serif;      /* major headings / logotype only */
    --font-body: 'Inter', sans-serif;     /* everything else: public + admin */
    --font-decorative: 'MedievalSharp', cursive; /* opt-in wordmark flourish only */

    /* Fluid type scale (mobile -> desktop) */
    --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
    --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
    --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --text-xl: clamp(1.4rem, 1.2rem + 1vw, 2rem);
    --text-2xl: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem);
    --text-3xl: clamp(2.2rem, 1.8rem + 2vw, 3.5rem);
    --text-4xl: clamp(2.6rem, 2rem + 3vw, 5rem);

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ---- Radius ---- */
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 20px;
    --radius-pill: 50px;

    /* ---- Shadows / glow ---- */
    --shadow-soft: 0 5px 20px rgba(0, 0, 0, 0.3);
    --shadow-strong: 0 10px 40px rgba(0, 0, 0, 0.5);
    --glow-primary: 0 0 20px rgba(124, 58, 237, 0.5);
    --glow-gold: 0 0 20px rgba(202, 138, 4, 0.5);
    --glow-danger: 0 0 20px rgba(244, 63, 94, 0.5);
    --glow-orange: var(--glow-danger); /* legacy alias */

    /* ---- Motion ---- */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* ---- Touch targets ---- */
    --touch-min: 44px;

    /* ---- z-index scale (shared by every stacking context site-wide) ---- */
    --z-header: 1000;
    --z-mobile-menu: 1002;
    --z-modal: 1100;
    --z-toast: 1200;

    /* Safe-area aware header height, used to size the mobile map/full-bleed sections */
    --header-h: 64px;

    /* Bottom nav footer height, used to reserve body padding so fixed footer never covers content */
    --footer-h: 64px;
}

/*
   Shared breakpoint scale (documented here; raw CSS media queries can't read
   custom properties, so every stylesheet should hardcode these same three
   values instead of inventing new ones):
     - up to 480px   -> small phones
     - up to 768px   -> phones / mobile nav
     - 769-1024px    -> tablet
     - from 1025px   -> desktop
*/