/* =========================================================================
   Modual Design Tokens — single source of truth
   Sourced from Modual Brand Guidelines v1.01.2024.
   This file is enqueued sitewide by modual-portal-theme and used as a
   dependency by every visitor-facing plugin stylesheet.
   ========================================================================= */

/* --- Self-hosted Montserrat (variable font) ------------------------------ */
@font-face {
    font-family: "Montserrat";
    src: url("../../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
         url("../../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
         url("../../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* --- Brand colours (fixed by guideline, do not change) ---------------- */
    --blue: #2e5efc;        /* Electric Blue — primary brand colour */
    --yellow: #fbba00;      /* Power Yellow — accent only */
    --grey-dark: #404042;   /* Wordmark / primary type on light surfaces */
    --grey-light: #cccccc;  /* Dividers / disabled */
    --white: #ffffff;

    /* --- Inferred extension steps (UI affordances) ------------------------ */
    --blue-700: #1c3fc2;
    --blue-300: #88a5fd;
    --blue-50:  #eaf0ff;

    --yellow-700: #c79400;
    --yellow-300: #fdd766;
    --yellow-50:  #fff8e0;

    --grey-900: #1f1f21;
    --grey-800: #2c2c2e;
    --grey-700: #404042;    /* alias of --grey-dark */
    --grey-500: #7a7a7c;
    --grey-300: #b8b8ba;
    --grey-200: #e3e3e4;
    --grey-100: #efefef;
    --grey-50:  #f7f7f7;

    /* --- Semantic foreground / background --------------------------------- */
    --fg-1: var(--grey-900);
    --fg-2: var(--grey-700);
    --fg-3: var(--grey-500);
    --fg-on-blue:   var(--white);
    --fg-on-yellow: var(--grey-900);
    --fg-on-dark:   var(--white);
    --fg-link: var(--blue);

    --bg-1: var(--white);
    --bg-2: var(--grey-50);
    --bg-3: var(--grey-100);
    --bg-brand:  var(--blue);
    --bg-accent: var(--yellow);
    --bg-dark:   var(--grey-900);

    --border-1: var(--grey-200);
    --border-2: var(--grey-300);
    --border-strong: var(--grey-700);

    /* --- Approved gradients (CSS reproduction of brand PNGs) -------------- */
    --gradient-yellow:    linear-gradient(180deg, #fff8d6 0%, #fbba00 100%);
    --gradient-blue:      linear-gradient(180deg, #e6efff 0%, #2e5efc 70%, #1c3fc2 100%);
    --gradient-blue-grey: linear-gradient(180deg, #c6d2e3 0%, #b8a982 100%);

    /* --- Type system ------------------------------------------------------ */
    --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --weight-light:   300;  /* Modual signature heading weight */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    --fs-display: 72px;  --lh-display: 1.1;  --tr-display: -0.02em;
    --fs-h1:      48px;  --lh-h1:      1.15; --tr-h1:      -0.01em;
    --fs-h2:      36px;  --lh-h2:      1.2;  --tr-h2:      -0.01em;
    --fs-h3:      24px;  --lh-h3:      1.3;  --tr-h3:      0;
    --fs-h4:      20px;  --lh-h4:      1.4;  --tr-h4:      0;
    --fs-body-lg: 18px;  --lh-body-lg: 1.55;
    --fs-body:    16px;  --lh-body:    1.55;
    --fs-small:   14px;  --lh-small:   1.45;
    --fs-eyebrow: 12px;  --lh-eyebrow: 1.2;  --tr-eyebrow: 0.12em;

    /* --- Spacing scale (4px base) ---------------------------------------- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  24px;
    --sp-6:  32px;
    --sp-7:  48px;
    --sp-8:  64px;
    --sp-9:  96px;
    --sp-10: 128px;
    --sp-11: 160px;

    /* --- Radii (max 6px on UI, 12px on cards/panels only) ---------------- */
    --radius-none: 0;
    --radius-sm:   2px;
    --radius-md:   6px;
    --radius-lg:   12px;
    --radius-pill: 999px;

    /* --- Elevation (sparingly — brand is flat) --------------------------- */
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06);
    --shadow-2: 0 8px 24px rgb(0 0 0 / 0.08);
    --shadow-3: 0 16px 48px rgb(0 0 0 / 0.12);
    --shadow-focus: 0 0 0 3px rgb(46 94 252 / 0.35);

    /* --- Motion ---------------------------------------------------------- */
    --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro:  150ms;
    --dur-state:  250ms;
    --dur-layout: 400ms;

    /* --- Layout shortcuts ------------------------------------------------ */
    --header-height: 64px;
}

/* =========================================================================
   Element base — applied wherever this stylesheet is enqueued.
   Plugins that scope styles to their own wrappers will inherit body type.
   ========================================================================= */
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--weight-regular);
    color: var(--fg-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --- Headings (default — plugins may scope override) -------------------- */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-light);
}
h4 {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
}

/* Tabular numerals helper for stats */
.modual-stat-num,
.stat-num {
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-light);
}

/* Eyebrow / kicker */
.modual-eyebrow,
.eyebrow {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--fs-eyebrow);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--fg-2);
    margin: 0;
}