/* lumaqube.com design foundation: the heading font, the tokens and the shared
   motion keyframes. Rules for using them: md_files/DESIGN.md.

   Loaded by head.php on every page that uses it, and harmless on the ones that
   do not use it yet: it only defines variables, @font-face rules and keyframes.
   Nothing here styles an element. A font file downloads only when a page
   actually sets font-family to it.

   Every token is prefixed --lq- so it cannot collide with the --brand / --ink
   names older page styles define for themselves. A page adopting the design
   maps its own names onto these (see css/home-refresh.css). */

/* Geist for headings (SIL OFL, @fontsource-variable/geist 5.3.0), self-hosted
   like fonts/fonts.css because Google Fonts is blocked in China. One variable
   file per subset covers every weight. Plus Jakarta Sans was tried first and
   dropped: its wide punctuation left a visible gap before every full stop. */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/geist-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/geist-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Type */
    --lq-font-display: 'Geist', 'Inter', system-ui, sans-serif;
    --lq-font-body: 'Inter', 'Poppins', system-ui, sans-serif;

    /* Colour */
    --lq-ink: #0b1220;        /* headings, strong text */
    --lq-ink-2: #334155;      /* body copy on white */
    --lq-muted: #5b6b82;      /* secondary text; 5.3:1 on white */
    --lq-line: #e5e9f0;       /* borders, dividers */
    --lq-bg: #ffffff;
    --lq-bg-alt: #f6f8fc;     /* tinted bands, quiet panels */
    --lq-dark: #0b1220;       /* dark bands */
    --lq-brand: #2563eb;
    --lq-brand-2: #0ea5e9;    /* second stop of the brand gradient */
    --lq-brand-ink: #1d4ed8;  /* brand text on hover */
    --lq-grad: linear-gradient(135deg, var(--lq-brand), var(--lq-brand-2));

    /* Shape */
    --lq-r-sm: 10px;
    --lq-r-md: 16px;
    --lq-r-card: 20px;
    --lq-r-lg: 24px;

    /* Elevation: 1 resting card, 2 floating chip, 3 lifted / featured */
    --lq-sh-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
    --lq-sh-2: 0 10px 28px -10px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.05);
    --lq-sh-3: 0 28px 60px -18px rgba(30,64,175,.30), 0 6px 16px rgba(15,23,42,.06);

    /* Motion */
    --lq-ease-out: cubic-bezier(.16,1,.3,1);
    --lq-dur-1: 150ms;        /* press, small state changes */
    --lq-dur-2: 260ms;        /* hover, colour, lift */
    --lq-dur-3: 700ms;        /* entrances */
    --lq-stagger: 80ms;       /* per item in a row */

    /* Rhythm: vertical padding of a section */
    --lq-sec-y: 104px;
    --lq-sec-y-sm: 64px;

    /* Focus ring */
    --lq-focus: 3px solid rgba(37,99,235,.55);
}

/* Entrance keyframes. Play them with fill-mode "backwards", never "both" or
   "forwards": a filled final transform outranks a card's own :hover lift. */
@keyframes lqRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes lqRiseScale {
    from { opacity: 0; transform: translateY(18px) scale(.96); }
    to   { opacity: 1; transform: none; }
}