/* ============================================================
   Meridian — design tokens
   ------------------------------------------------------------
   The single source of truth for colour, type, spacing, radius
   and elevation. Nothing else in the codebase should contain a
   raw hex value; if a component needs a colour that is not here,
   add it here first.

   Loaded before every other stylesheet on every page.
   ============================================================ */

:root {
    /* ---- type ------------------------------------------------ */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* A real scale. Stay on it. */
    --fs-xs:    12px;
    --fs-sm:    13px;
    --fs-base:  15px;
    --fs-md:    17px;
    --fs-lg:    20px;
    --fs-xl:    24px;
    --fs-2xl:   30px;
    --fs-3xl:   38px;

    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-body:  1.6;

    /* ---- neutrals -------------------------------------------- */
    /* Very slightly cool, biased toward the accent rather than
       a flat grey, so they read as chosen. */
    --bg:          #FBFBFD;   /* page ground */
    --surface:     #FFFFFF;   /* cards, panels, menus */
    --surface-2:   #F4F5F8;   /* inset areas, table headers, wells */
    --surface-3:   #ECEEF3;   /* hover on inset, disabled fills */

    --ink:         #0F1115;   /* primary text */
    --ink-2:       #565C66;   /* secondary text */
    --ink-3:       #878D97;   /* tertiary text, placeholders */
    --ink-on-dark: #F7F8FA;

    --line:        #E3E6EC;   /* visible borders */
    --line-2:      #EDEFF4;   /* internal dividers */

    /* ---- accent ---------------------------------------------- */
    --accent:       #2B44FF;
    --accent-deep:  #1B2CC4;  /* hover / pressed */
    --accent-soft:  #EDEFFF;  /* tinted fills */
    --accent-ink:   #FFFFFF;  /* text on accent */

    /* ---- semantic (separate from the accent) ----------------- */
    --ok:          #0E9F6E;
    --ok-soft:     #E3F6EF;
    --ok-ink:      #05603A;

    --warn:        #C2740A;
    --warn-soft:   #FDF3E2;
    --warn-ink:    #7A4906;

    --danger:      #DC2626;
    --danger-soft: #FDECEC;
    --danger-ink:  #991B1B;

    --info:        #2B44FF;
    --info-soft:   #EDEFFF;
    --info-ink:    #1B2CC4;

    --muted:       #6B7280;   /* neutral "secondary action" fills */
    --muted-deep:  #4B5563;

    /* ---- dark chrome (admin sidebar, log console) ------------ */
    --chrome:        #0F1115;
    --chrome-2:      #191C22;
    --chrome-ink:    #B9BEC9;
    --chrome-ink-hi: #FFFFFF;
    --chrome-line:   #262A33;

    /* Log levels read on the dark console ground, so they are their
       own set rather than the semantic colours above, which are tuned
       for light surfaces and go muddy on #0F1115. */
    --log-info:  #7AA2F7;
    --log-error: #F7768E;
    --log-warn:  #E0AF68;
    --log-debug: #8A929E;

    /* Text on a saturated fill. Named so a component never has to
       reach for a literal. */
    --on-fill: #FFFFFF;

    /* ---- spacing --------------------------------------------- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-14: 56px;

    /* ---- chart series ---------------------------------------- */
    /* A categorical palette: colour that carries identity, for a chart with
       more than one series. Status colours are NOT reusable here - --ok and
       --danger mean good and bad, and a "bot visits" line is neither.
       Assign these in order and never cycle; a fifth series folds into
       "other" or becomes a second chart.

       Slot 1 is the accent; the rest are stepped to sit with it. Checked
       against a white chart surface rather than chosen by eye: every slot
       inside the lightness band and above the chroma floor, worst adjacent
       pair 8.4 deltaE under protanopia (>= 8) and 19.8 for normal vision
       (>= 15), and all four at or above 3:1 contrast. Changing any value
       means re-checking the set, not just that one. */
    --series-1: #2B44FF;   /* blue   — same as --accent */
    --series-2: #D95926;   /* orange */
    --series-3: #199E70;   /* aqua   */
    --series-4: #C98500;   /* yellow */

    /* ---- radius ---------------------------------------------- */
    --r-sm:   7px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-pill: 999px;

    /* ---- elevation ------------------------------------------- */
    /* Spent by role, not stamped on everything. */
    --sh-xs: 0 1px 2px rgba(15, 17, 21, .05);
    --sh-sm: 0 1px 3px rgba(15, 17, 21, .07), 0 1px 2px rgba(15, 17, 21, .04);
    --sh-md: 0 8px 24px -12px rgba(15, 17, 21, .22);
    --sh-lg: 0 18px 44px -20px rgba(15, 17, 21, .30);

    --ring: 0 0 0 3px rgba(43, 68, 255, .22);

    /* ---- layout ---------------------------------------------- */
    /* Published so pages stop hardcoding a guess at the header's
       height. Kept in sync with the real header by the rules in
       styles.css — never duplicate the number anywhere else. */
    --header-h: 56px;
    --page-max: 1200px;
    --page-pad: 20px;

    --z-header:   1000;
    --z-dropdown: 1100;
    --z-modal:    2000;
    --z-toast:    2100;
}

@media (max-width: 640px) {
    :root {
        --header-h: 52px;
        --page-pad: 14px;
        --fs-3xl: 30px;
        --fs-2xl: 25px;
    }
}