/* Pulse-aligned theme tokens + Montserrat.
 *
 * Step 1+2 of the Pulse design-language alignment (see chat history from
 * 2026-04-22). We (a) self-host Montserrat at the same 5 weights Pulse uses,
 * and (b) publish Pulse's `--base-*` palette plus light/dark semantic tokens.
 * Existing component classes (`var(--bg-body)`, `var(--text-main)`, etc.) keep
 * working — we just repoint those CSS variables at the new palette in
 * `index.html`. No component rewrites in this pass.
 *
 * Font files come from /static/fonts/ (copied from pulse.devoteam.com); they
 * are loaded `font-display: swap` so first paint isn't blocked on the woffs.
 */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 300;
    font-display: swap;
    src: url('/fonts/Montserrat-Light-D5wuBZ7D.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Montserrat-Regular-DRoh7jzm.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/Montserrat-Medium-Cyc8wXKo.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/Montserrat-SemiBold-BiEyYWGd.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
    src: url('/fonts/Montserrat-Bold-cWG6a6a7.woff') format('woff');
}

/* ── Pulse palette (base hex values + semantic tokens) ────────────────────
 * Kept in :root so both light and dark themes can reference the same hexes.
 * Semantic tokens (`--primary`, `--foreground`, etc.) are then overridden in
 * the `.dark` rule further down. We expose them for future component work;
 * today most of Oppo still uses our own `--bg-body` / `--text-main` aliases,
 * which are reassigned to these base vars inside index.html.
 */
:root {
    /* Greys */
    --base-white:                  #ffffff;
    --base-black:                  #000000;
    --base-grey-10:                #f9fafb;
    --base-grey-20:                #f3f4f6;
    --base-grey-30:                #e8e9eb;
    --base-grey-40:                #c4c4c4;
    --base-grey-60:                #757575;
    --base-grey-100:               #3c3c3a;

    /* Dark-mode backgrounds */
    --base-dark-bg-primary:        #080323;
    --base-dark-bg-primary-tinted: #15112e;
    --base-dark-hover:             #1e1845;
    --base-dark-selected:          #080341;

    /* Blue ramp (brand) */
    --base-blue-10:                #eff5fa;
    --base-blue-20:                #dce9f4;
    --base-blue-40:                #c0d7ed;
    --base-blue-80:                #4a8cca;  /* primary */
    --base-blue-90:                #2e689e;  /* primary hover */
    --base-blue-100:               #1c3d5e;  /* secondary */

    /* Semantic accents */
    --base-pink-10:                #fddade;
    --base-pink-30:                #fca2ae;
    --base-pink-100:               #ec86a3;
    --base-green-apple:            #67c85f;
    --base-green-100:              #5ab891;  /* success */
    --base-red-40:                 #f8485e;  /* destructive */
    --base-red-50:                 #f6132d;
    --base-yellow-100:             #fcc354;
    --base-orange-100:             #f09e52;
    --base-violet-100:             #63238c;
    --base-electra-100:            #8de8dd;
    --base-ocean-blue-100:         #38c9f6;
    --base-fuchsia-100:            #eca0f2;
    --base-lavender-100:           #9f90f6;

    /* Semantic tokens — LIGHT defaults. These mirror Pulse's `.light` rule. */
    --background:                  var(--base-white);
    --foreground:                  var(--base-grey-100);
    --foreground-secondary:        var(--base-grey-60);
    --primary:                     var(--base-blue-80);
    --primary-foreground:          var(--base-white);
    --secondary:                   var(--base-blue-100);
    --secondary-foreground:        var(--base-white);
    --success:                     var(--base-green-100);
    --success-foreground:          var(--base-white);
    --destructive:                 var(--base-red-40);
    --destructive-foreground:      var(--base-white);
    --border:                      var(--base-grey-40);
    --border-strong:               var(--base-grey-60);
    --ring:                        var(--base-blue-80);

    /* Tailwind type scale (kept so utilities like text-sm keep working) */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;

    /* Radii — Pulse caps at 8px (rounded-lg). Tailwind utilities below remap. */
    --radius-xs:  0.125rem;
    --radius-sm:  0.25rem;
    --radius-md:  0.375rem;
    --radius-lg:  0.5rem;

    /* Chart/graph palette — order is Pulse's own: we confirmed the first four
     * slots from a live Pulse Recharts pie (#67c85f, #fcc354, #4a8cca,
     * #ec86a3). The remaining slots extend with Pulse's accent ramp, picked
     * for hue distinctness when a chart has >4 series. Red is intentionally
     * last so it only gets assigned when a chart overflows the main palette
     * (red reads as "error", not just "series 11"). */
    --chart-1:  var(--base-green-apple);     /* #67c85f */
    --chart-2:  var(--base-yellow-100);      /* #fcc354 */
    --chart-3:  var(--base-blue-80);         /* #4a8cca — brand */
    --chart-4:  var(--base-pink-100);        /* #ec86a3 */
    --chart-5:  var(--base-violet-100);      /* #63238c */
    --chart-6:  var(--base-ocean-blue-100);  /* #38c9f6 */
    --chart-7:  var(--base-orange-100);      /* #f09e52 */
    --chart-8:  var(--base-electra-100);     /* #8de8dd */
    --chart-9:  var(--base-fuchsia-100);     /* #eca0f2 */
    --chart-10: var(--base-lavender-100);    /* #9f90f6 */
    --chart-11: var(--base-red-40);          /* #f8485e — reserve for negatives */
    --chart-other: var(--base-grey-60);      /* #757575 — "Other" / unclassified */
}

.dark {
    --background:                  var(--base-dark-bg-primary);
    --foreground:                  var(--base-grey-20);
    --foreground-secondary:        var(--base-grey-40);
    --primary:                     var(--base-blue-80);
    --primary-foreground:          var(--base-grey-20);
    --secondary:                   var(--base-blue-100);
    --secondary-foreground:        var(--base-grey-20);
    --success:                     var(--base-green-100);
    --success-foreground:          var(--base-grey-20);
    --destructive:                 var(--base-red-40);
    --destructive-foreground:      var(--base-grey-20);
    --border:                      var(--base-grey-100);
    --border-strong:               var(--base-grey-60);
    --ring:                        var(--base-blue-80);
}