/* ============================================================
   ARRANZ LAB — design tokens
   Elegant, scientific, minimalist. Palette "Periwinkle": derived from the
   lab's own imagery (the periwinkle astrocytes in the hero photo and the
   light-blue brain illustration) so photography, UI and figures share one
   colour family. Deep navy carries text, header and panels; a mid blue
   carries actions; a luminous light blue (--blue-300) is the accent.

   Loaded first; every other stylesheet in assets/css/ reads from here.
   Enqueue order lives in functions.php (arz_enqueue_styles).
   ============================================================ */

:root {
    /* Palette */
    --night:      #0E1C3A;  /* footer, deepest panels */
    --ink:        #172B55;  /* headings, body ink */
    --ink-2:      #1F3768;
    --blue-900:   #24438A;
    --blue-700:   #2F54B0;
    --blue-600:   #3B63C7;  /* primary action */
    --blue-500:   #5A82DA;
    --blue-300:   #8AA8EC;  /* light accent ("sky") */
    --blue-200:   #C3D3F6;
    --blue-100:   #E2EAFC;
    --blue-50:    #F2F6FE;
    --paper:      #FFFFFF;
    --fog:        #F6F8FD;
    --line:       #E1E7F1;
    --line-strong:#C9D4E6;
    --ink-soft:   #4A5878;
    --ink-faint:  #8592A8;

    /* Disease-progression ramp — Research interactive only */
    --state-homeostatic: #8AA8EC;
    --state-early:       #A5559F;
    --state-late:        #E24062;

    --font-body: Calibri, Carlito, Candara, "Segoe UI", Optima, "Century Gothic", "Noto Sans", sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Shadows are tinted with --night (14,28,58), never pure black */
    --shadow-sm: 0 1px 2px rgba(14,28,58,.05), 0 1px 1px rgba(14,28,58,.04);
    --shadow-md: 0 10px 28px -6px rgba(14,28,58,.12);
    --shadow-lg: 0 24px 56px -12px rgba(14,28,58,.18);
    --shadow-accent: 0 12px 26px -10px rgba(59,99,199,.45);

    /* Motion — one system for the whole site (see base/motion.css).
       ease-out for anything entering or responding; ease-in-out for things
       moving across the screen; never ease-in. */
    --ease-out:    cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --ease:        var(--ease-out);
    --dur-fast:    160ms;   /* press feedback, link colour */
    --dur-base:    320ms;   /* card hover, tab/panel swap */
    --dur-slow:    420ms;   /* menus, header state */
    --dur-reveal:  1100ms;  /* scroll entrances */
    --stagger:     110ms;   /* cascade step between siblings */
    --dur: var(--dur-reveal);

    /* Shared entrance-transition segment for .reveal. `transition` is a
       shorthand: if two rules at the same specificity each declare their
       own `transition`, the later one wins OUTRIGHT (it does not merge
       sub-properties). So every component that has its own hover
       `transition` must fold this var into ITS OWN transition list,
       comma-separated alongside its hover properties. Because it's a var(),
       the timing/easing stays defined in one place. */
    --reveal-transition: opacity var(--dur-reveal) var(--ease-out), clip-path 900ms var(--ease-out);

    --container: 1240px;
    --container-narrow: 820px;

    /* Must match the header's real height: content is laid out with this
       before header.js measures it, and any difference shows as a jump. */
    --header-h: 73px;
}