/*
 * Immersify – Design Tokens
 * ─────────────────────────────────────────────────────────────
 * Every colour, text style, space and timing the theme uses. Component and
 * block CSS reads these variables and never a literal.
 *
 * Conventions (after the Innermedia base theme):
 *   – Colours are primitives named after the colour (--color-violet), never
 *     roles like "primary". Values from Design/immersify_portfolio_theme.html
 *     and the logo in Design/Illustrator/logo.ai.
 *   – Text styles are full font shorthands named by their metrics:
 *       --text-<size><family><weight>
 *       family: o = Outfit, i = Inter, p = Press Start 2P
 *       weight: r = 400, m = 500, s = 600, b = 700, x = 800, k = 900
 *     A style with tracking says so in its comment and the consumer sets it.
 *   – Everything is px.
 * ─────────────────────────────────────────────────────────────
 */

:root {

    /* ── Colours ─────────────────────────────────────────────── */

    /* Neon – the logo gradient runs blue → violet → magenta, the UI
       gradient cyan → violet → magenta */
    --color-cyan:          #00bfff;
    --color-blue:          #4b8fff;   /* logo gradient start */
    --color-violet:        #c45eff;
    --color-magenta:       #ff00ff;

    /* Darks */
    --color-black:         #000000;   /* page ground */
    --color-charcoal:      #0d0d0d;   /* raised surfaces */
    --color-graphite:      #111111;   /* cards */

    /* Lights */
    --color-snow:          #f5f5f5;   /* body ink */
    --color-silver:        #aaaaaa;   /* secondary copy on black */
    --color-grey:          #8a8a8a;   /* meta, muted links – 5.9:1 on black */

    /* Alphas of the violet, for lines and tints */
    --color-violet-10:     rgb(196 94 255 / 10%);
    --color-violet-18:     rgb(196 94 255 / 18%);   /* hairlines, card borders */
    --color-violet-50:     rgb(196 94 255 / 50%);   /* hover borders */

    /* ── Gradients ───────────────────────────────────────────── */
    --gradient-neon:       linear-gradient(90deg, var(--color-cyan), var(--color-violet), var(--color-magenta));
    --gradient-logo:       linear-gradient(45deg, var(--color-blue), var(--color-violet) 55%, var(--color-magenta));
    --gradient-scan:       linear-gradient(90deg, transparent, var(--color-cyan), var(--color-violet), var(--color-magenta), transparent);

    /* ── Glows ───────────────────────────────────────────────── */
    --glow-text:           0 0 6px rgb(196 94 255 / 55%), 0 0 22px rgb(255 0 255 / 35%);
    --glow-violet:         0 0 0 1px rgb(196 94 255 / 35%), 0 0 24px -6px rgb(196 94 255 / 60%);
    --glow-cyan:           0 0 16px -4px var(--color-cyan), inset 0 0 12px -6px var(--color-cyan);
    --glow-button:         0 0 14px -2px rgb(196 94 255 / 55%), 0 0 2px rgb(0 191 255 / 80%);
    --glow-button-hover:   0 0 34px 0 rgb(255 0 255 / 55%), 0 0 6px rgb(0 191 255 / 90%);

    /* ── Typography ──────────────────────────────────────────── */
    --font-outfit:         'Outfit', system-ui, sans-serif;
    --font-inter:          'Inter', system-ui, sans-serif;
    --font-press-start:    'Press Start 2P', ui-monospace, monospace;

    /* Ordered by size */
    --text-10pr:           400 10px/16px var(--font-press-start);   /* Eyebrow, label, tag – tracking 0.12em */
    --text-11pr:           400 11px/16px var(--font-press-start);   /* Button – tracking 0.06em */
    --text-13or:           500 13px/20px var(--font-outfit);        /* Nav link – tracking 0.06em, uppercase */
    --text-13ir:           400 13px/20px var(--font-inter);         /* Small, meta */
    --text-16ir:           400 16px/27px var(--font-inter);         /* Body */
    --text-16ob:           700 16px/20px var(--font-outfit);        /* Wordmark – tracking 0.08em */
    --text-18ir:           400 18px/30px var(--font-inter);         /* Body large, intro */
    --text-20ob:           700 20px/26px var(--font-outfit);        /* Heading 4, card title */
    --text-24ob:           700 24px/30px var(--font-outfit);        /* Heading 3, FAQ question */
    --text-28ok:           900 28px/30px var(--font-outfit);        /* Stat number */
    --text-34ok:           900 34px/38px var(--font-outfit);        /* Heading 2 – mobile; mobile menu link */
    --text-48ok:           900 48px/52px var(--font-outfit);        /* Heading 2 – tracking -0.02em */
    --text-44ok:           900 44px/47px var(--font-outfit);        /* Heading 1 – mobile, tracking -0.02em */
    --text-80ok:           900 80px/85px var(--font-outfit);        /* Heading 1 – tracking -0.02em */

    /* ── Spacing ─────────────────────────────────────────────── */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   32px;
    --space-xl:   48px;
    --space-2xl:  64px;
    --space-3xl:  96px;

    /* ── Layout ──────────────────────────────────────────────── */
    --container-width:     1200px;
    --container-narrow:    860px;    /* the branding's reading width */
    --gutter:              20px;
    --header-height:       72px;

    /* ── Radius ──────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   14px;
    --radius-pill: 100vmax;

    /* ── Transitions ─────────────────────────────────────────── */
    --transition-fast: 0.12s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.6s cubic-bezier(.2, .7, .2, 1);

}

@media (min-width: 768px) {
    :root {
        --gutter: 32px;
    }
}