/* ==========================================================================
   Design tokens — single source of truth for colour, spacing, type, motion.
   All other stylesheets should reference these custom properties rather
   than hard-coding values.
   ========================================================================== */

:root {
    /* Colour — warm, bright "creator" palette: cream base, deep-navy ink,
       coral/sunshine/sky/mint/lavender accents. Inspired by aliabdaal.com's
       warm-cream + navy + coral system, pushed more saturated/playful. */
    --color-bg: #fbf3e8;
    --color-bg-alt: #ffffff;
    --color-surface: #ffffff;
    --color-surface-light: #f6ecdd;

    --color-text: #191a2e;
    --color-text-muted: #5c5d75;
    --color-text-on-light: #191a2e;
    --color-text-on-light-muted: #5c5d75;

    --color-border: rgba(25, 26, 46, 0.1);
    --color-border-light: rgba(25, 26, 46, 0.14);

    --color-accent: #ff6b4a;
    --color-accent-2: #ffb238;
    --color-accent-glow: rgba(255, 107, 74, 0.35);

    /* --color-accent fails WCAG AA as small text on this palette's light
       backgrounds (~2.5:1, needs 4.5:1) — it's tuned for backgrounds,
       gradients, and decorative use (buttons, orbs, icons), not for text
       ON a light background. Use this darker variant instead anywhere
       --color-accent was being used as actual readable text (verified
       >=4.5:1 against cream/white/card-light backgrounds via
       scratchpad/contrast.php during the accessibility audit). */
    --color-accent-text: #b34b34;

    --color-sky: #3ec6f0;
    --color-mint: #2fd7a3;
    --color-lavender: #a78bfa;

    --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    --gradient-bg: radial-gradient(circle at 15% -10%, rgba(255, 107, 74, 0.14), transparent 45%),
        radial-gradient(circle at 90% 5%, rgba(62, 198, 240, 0.14), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(255, 178, 56, 0.12), transparent 45%);

    /* Cards — soft, flat, warm surfaces rather than dark glass */
    --glass-bg: rgba(255, 255, 255, 0.86);
    --glass-border: rgba(25, 26, 46, 0.08);
    --glass-blur: 16px;

    /* Typography — bold editorial serif for headings (Gen-Z "creator" feel),
       friendly geometric sans for body. Loaded via Google Fonts in header.php. */
    --font-heading: 'Fraunces', 'Georgia', serif;
    --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;
    --fs-4xl: 3.75rem;

    /* Spacing scale */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3.25rem;
    --space-2xl: 5rem;
    --space-3xl: 8rem;

    /* Layout */
    --container-width: 1200px;
    --container-padding: var(--space-md);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Elevation — warm-tinted soft shadows rather than harsh black */
    --shadow-sm: 0 4px 14px rgba(25, 26, 46, 0.1);
    --shadow-md: 0 12px 32px rgba(25, 26, 46, 0.14);
    --shadow-glow: 0 0 40px var(--color-accent-glow);
    --shadow-3d: 0 24px 44px -14px rgba(25, 26, 46, 0.22), 0 8px 18px -8px rgba(25, 26, 46, 0.14);

    /* 3D depth — perspective context + pointer-driven tilt (set inline via JS) */
    --perspective: 1200px;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-z: 0px;
    --tilt-scale: 1;
    --glare-x: 50%;
    --glare-y: 50%;
    --reveal-y: 0px;
    --reveal-rx: 0deg;
}