/* ============================================================
   PLUME ENERGIE - DESIGN TOKENS
   ------------------------------------------------------------
   Single source of truth for the colours, radii and shadows of
   the new design. Values sampled from the canva mockup.
   Loaded before every other stylesheet, so any file can use
   var(--pe-*). Changing a colour here changes it everywhere.
   ============================================================ */

:root {
    /* brand */
    --pe-navy: #0B235B;
    --pe-navy-deep: #071845;
    --pe-yellow: #FAE505;
    --pe-yellow-deep: #F7D00D;

    /* surfaces */
    --pe-bg: #FFFFFF;
    --pe-surface: #F5F5F5;
    --pe-surface-hover: #ECEDF1;
    --pe-header-bg: #FFFFFF;
    /* The deep navy of the dark theme, in both themes: the footer reads as one band
       whichever one is on. Was #0B235B, the brand navy, in the light theme only. */
    --pe-footer-bg: #132038;

    /* text */
    --pe-text: #14161C;
    --pe-text-muted: #5F606A;
    --pe-text-on-dark: rgba(255, 255, 255, 0.82);

    /* primary action: navy button, white label */
    --pe-primary-bg: #0B235B;
    --pe-primary-fg: #FFFFFF;
    --pe-primary-bg-hover: #16307A;

    /* the auth pages use a black action instead of the navy one (slides 10-11) */
    --pe-auth-action-bg: #111318;
    --pe-auth-action-fg: #FFFFFF;

    /* lines and depth */
    --pe-border: #E5E7EB;
    --pe-border-strong: #D1D5DB;
    --pe-shadow-sm: 0 2px 8px rgba(11, 35, 91, 0.06);
    --pe-shadow-md: 0 6px 20px rgba(11, 35, 91, 0.10);

    /* ---- typography -------------------------------------------------
       Inter, with a fluid scale: every size interpolates with the
       viewport between a floor (phone) and a ceiling (desktop), so the
       text never needs a media query to stay readable.
       ------------------------------------------------------------------ */
    --pe-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    --pe-fs-xs: clamp(11px, 0.70vw + 8.6px, 12.5px);
    --pe-fs-sm: clamp(12.5px, 0.80vw + 9.5px, 14px);
    --pe-fs-base: clamp(14px, 0.90vw + 10.5px, 16px);
    --pe-fs-md: clamp(15px, 1.00vw + 11px, 18px);
    --pe-fs-lg: clamp(17px, 1.60vw + 11px, 22px);
    --pe-fs-xl: clamp(20px, 2.40vw + 12px, 30px);
    --pe-fs-2xl: clamp(26px, 4.00vw + 12px, 46px);

    --pe-lh-tight: 1.25;
    --pe-lh: 1.6;

    /* geometry */
    --pe-radius-sm: 10px;
    --pe-radius-md: 16px;
    --pe-radius-lg: 24px;
    --pe-radius-pill: 999px;

    /* The content column of every page: the hero, the article list and its
       sidebar, the call to action band and the footer all line up on it. */
    --pe-page-width: 1320px;
}

/* ------------------------------------------------------------
   Dark mode. The navy cannot be both the background and the
   accent, so the roles swap: near black navy grounds the page
   and the yellow becomes the primary action.
   ------------------------------------------------------------ */
body.dark-mode {
    /*
        The grounds of the dark theme, deepened towards the brand navy.

        They move together on purpose. #08152E is more saturated than the shade it
        replaces but measures slightly lighter, so leaving the surfaces where they
        were would have cut the step between a card and the page from 1.128 to 1.100
        - and the footer, already the faintest boundary at 1.088, to 1.061. Raised
        alongside, a card sits at 1.136, a hovered one at 1.322 and the footer at
        1.108, which is where they were or a little better.

        The header shares the value of the page, as it did before: any difference
        between the two shows as a seam under the sticky bar.

        TO GO BACK, restore these five and nothing else:
            --pe-bg: #0A1226;
            --pe-surface: #141E38;
            --pe-surface-hover: #1C2846;
            --pe-header-bg: #0A1226;
            --pe-footer-bg: #101B33;
    */
    --pe-bg: #08152E;
    --pe-surface: #16213C;
    --pe-surface-hover: #1F2C4E;
    --pe-header-bg: #08152E;
    --pe-footer-bg: #132038;

    --pe-text: #E8EAF0;
    --pe-text-muted: #A3AAC0;

    --pe-primary-bg: #FAE505;
    --pe-primary-fg: #0B235B;
    --pe-primary-bg-hover: #FFF04D;

    --pe-auth-action-bg: #FAE505;
    --pe-auth-action-fg: #0B235B;

    --pe-border: rgba(255, 255, 255, 0.10);
    --pe-border-strong: rgba(255, 255, 255, 0.18);
    --pe-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --pe-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */

html,
body {
    font-family: var(--pe-font);
    font-size: var(--pe-fs-base);
    line-height: var(--pe-lh);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Inter ships tabular and contextual features that make ui text cleaner */
body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}