/* =========================
   THEME VARIABLES
   Nordic / Dark / Cinematic
========================= */

:root {

    /* ===== Colors ===== */
    --color-bg-main: #0b0d10;
  --color-bg-secondary: #111318;
    --color-bg-tertiary: #161a20;

    --color-text-main: #e6e7e9;
    --color-text-muted: #8f959b;
    --color-text-invert: #ffffff;

    --color-accent: #8fb3bb;
    --color-border: rgba(255,255,255,0.08);

    /* ===== Gradients ===== */
    --gradient-dark:
        linear-gradient(
            180deg,
            rgba(11,13,16,0.95) 0%,
            rgba(11,13,16,0.7) 40%,
            rgba(11,13,16,1) 100%
        );

    --gradient-cta-subtle:
        radial-gradient(900px 380px at 18% 24%, rgba(143, 179, 187, 0.1), rgba(143, 179, 187, 0) 62%),
        radial-gradient(760px 320px at 84% 76%, rgba(122, 152, 196, 0.08), rgba(122, 152, 196, 0) 60%),
        linear-gradient(150deg, #10151d 0%, #121924 52%, #0d1219 100%);

    /* ===== Fonts ===== */
    --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;

    /* ===== Font sizes ===== */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.75rem;
    --fs-xxl: 2.5rem;
    --fs-hero: clamp(2.5rem, 6vw, 4.5rem);

    /* ===== Spacing ===== */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* ===== Layout ===== */
    --container-max: 1200px;
    --container-padding: 1.5rem;

    /* ===== Z-index ===== */
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 500;

    /* ===== Transitions ===== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.4s ease;
}

/* =========================
   FOCUS & TAP HIGHLIGHT
========================= */

/* Mobile tap highlight */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Custom focus style */
a:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* Remove default focus (mouse users) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}