/* ─────────────────────────────────────────
   Tiny Magiq — style.css
   World class rebuild — same colour palette
   Purple / teal / dark — Tiny Magiq identity
   ───────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --purple: #7c3aed;
    --purple-light: #9f67f5;
    --purple-dark: #5b21b6;
    /* Logo pink/magenta — the one brand hue absent from the purple→teal page
       gradient, so it pops on every part of the background (purple region AND
       teal region) where the purple stat colour washed out. Used for the
       numeric/stat highlights in responses and caselets. */
    --pink: #ec2a9a;
    --pink-light: #ff5bb0;
    /* Brighter purples than --purple-light, for controls that have to read as
       lit against the mid-page gradient. Two values, not one, because they
       answer to different limits: --purple-bright only ever tints an icon or a
       border, so it can run hot, while --purple-bright-fill sits under white
       bold text and has to hold ~3:1 — past #a56dff the label stops being
       legible, so that is a contrast ceiling, not a taste call. */
    --purple-bright: #b586ff;
    --purple-bright-fill: #a56dff;
    /* Logo red — the mark's third hue (the figures' red heads are #cc0000).
       Raw logo red measures ~2.5:1 on the dark caselet panel, so the stat
       accent ships the same hue lifted for dark-bg legibility. Dial: #e8695e
       deeper · #ee7c72 shipped · #f28b82 softest. */
    --red-logo: #cc0000;
    --stat-red: #ffa023;
    --teal: #0d9488;
    --teal-light: #14b8a6;
    --teal-dark: #0f766e;
    --green: #22c55e;
    --green-light: #4ade80;
    --white: #ffffff;
    --off-white: #f0f4ff;
    --muted: rgba(255, 255, 255, 0.65);
    --faint: rgba(255, 255, 255, 0.12);
    --card-bg: rgba(255, 255, 255, 0.06);
    --card-border: rgba(255, 255, 255, 0.12);
    --bg: #0a0a14;
    --bg-mid: #0f0f1e;
    --gradient-brand: linear-gradient(135deg, #7c3aed 0%, #0d9488 100%);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --transition: 0.22s ease;

    /* Shared page column — header, hero and signals all align to this shell,
       so the logo, hero copy and grid share one left edge. */
    --shell-max: 1160px;
    --shell-pad: 28px;
    --header-h: 64px;

    /* Hero content column — narrower than the shell and centred, so the whole
       hero block sits in the middle of the window while its text stays
       left-aligned. The header shares it so the logo tracks the hero's left edge. */
    --hero-col: 920px;

    /* Construct accent colours — tuned to read as icons/spines on the
       whitish glass cards over the purple→teal gradient (dark teal/blue
       washed out, so PUX/AIFL use brighter tints). */
    --iws: #e879f9;
    --pux: #2dd4bf;
    --aifl: #60a5fa;
    --fsa: #f59e0b;
}

html {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--white);
    /* Full-page wash. A single linear purple→teal ramp reads as a straight seam
       — a Mach band where the hues meet, sharpened by 8-bit contour banding.
       Instead: two corner-anchored radial glows (purple top-left, teal
       bottom-right) melt into a blended base, so the transition rides curved
       contours that never line up into an edge. A faint monochrome noise layer
       dithers away any residual banding. Same #7c3aed/#0d9488 brand hues. */
    background:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E") repeat,
        radial-gradient(135% 130% at 4% -14%, #7c3aed 0%, rgba(124, 58, 237, 0) 50%),
        radial-gradient(135% 130% at 106% 114%, #0d9488 0%, rgba(13, 148, 136, 0) 50%),
        linear-gradient(140deg, #5b3fc4 0%, #38699f 52%, #128a83 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Full-height column so the footer sits at the bottom of the viewport
   even when the page content is short (e.g. the thinking state). */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}