/* Oppo design tokens — CMP type ramp, spacing scale, shadow.
 *
 * Companion to pulse-theme.css. That file publishes the palette
 * (--base-blue-80, --base-grey-60, etc.) and semantic colour tokens
 * (--primary, --foreground, --border, …). It does NOT publish the
 * Pulse CMP typography ramp, spacing scale, or shadow effects — this
 * file does, so the redesigned Oppo pages (campaigns, reports, soon
 * opportunities/admin/docs) can reference Figma names directly.
 *
 * Token names mirror the Pulse Design System library in Figma
 * (file tugZAqGA5nW8Aibyojoyfy):
 *
 *   CMP font styles/H1 header style       → --type-h1
 *   CMP font styles/H2 header type        → --type-h2
 *   CMP font styles/H3 header type        → --type-h3
 *   CMP font styles/BODY (L)              → --type-body-l
 *   CMP font styles/BODY (M)              → --type-body-m
 *   CMP font styles/BODY (M) Highlighted  → --type-body-m-strong
 *   CMP font styles/BODY (S)              → --type-body-s
 *   CMP font styles/Block Text L          → --type-block-l
 *   CMP font styles/Block Text M          → --type-block-m
 *   CMP font styles/Highlighted Text M    → --type-highlight-m
 *
 * Each type token resolves to a `font:` shorthand value, so it can
 * be applied with a single line:
 *
 *     .card-title { font: var(--type-body-m-strong); }
 *
 * Letter-spacing is 0 across the ramp, so the shorthand is enough.
 */

:root {
    /* ── Typography (CMP font styles) ───────────────────────────────────
     * `font:` shorthand — `<style> <weight> <size>/<line-height> <family>`.
     * All Pulse CMP styles use Montserrat with letter-spacing 0; weights
     * are SemiBold (600) for headers/highlights and Medium (500) for body.
     */
    --type-h1:             600 24px/32px "Montserrat", system-ui, sans-serif;
    --type-h2:             600 18px/28px "Montserrat", system-ui, sans-serif;
    --type-h3:             600 14px/24px "Montserrat", system-ui, sans-serif;
    --type-body-l:         500 14px/24px "Montserrat", system-ui, sans-serif;
    --type-body-m:         500 12px/16px "Montserrat", system-ui, sans-serif;
    --type-body-m-strong:  600 12px/16px "Montserrat", system-ui, sans-serif;
    --type-body-s:         500 11px/14px "Montserrat", system-ui, sans-serif;
    --type-block-l:        500 14px/24px "Montserrat", system-ui, sans-serif;
    --type-block-m:        500 12px/16px "Montserrat", system-ui, sans-serif;
    --type-highlight-m:    600 12px/16px "Montserrat", system-ui, sans-serif;

    /* ── Spacing scale (Pulse CMP padding/gap variables) ────────────────
     * Pulse uses a 4px base step. p-0 / p-1 / p-1.5 / p-2 / p-3 cover
     * 95 % of frames in the redesign; p-4..p-6 are extrapolated for
     * page-level gutters.
     */
    --space-0:    0;
    --space-1:    4px;   /* p-1 / gap-1 */
    --space-1-5:  6px;   /* gap-1.5 — used between status dot and label */
    --space-2:    8px;   /* p-2 / gap-2 — card content gap */
    --space-3:    12px;  /* p-3 — table cell padding */
    --space-4:    16px;  /* card padding, tile gap */
    --space-5:    24px;  /* section gap */
    --space-6:    32px;  /* page H1 → first row */
    --space-7:    40px;  /* page bottom padding */

    /* ── Radii (Pulse caps at 8px) ──────────────────────────────────────
     * pulse-theme.css already defines --radius-xs/sm/md/lg in rem; we
     * re-declare in px under shorter names for layout consistency
     * with Figma's `var(--radius)` (=8) / `rounded-md` (=6) tokens.
     */
    --radius-none:  0;
    --radius-sm:    4px;   /* calc(var(--radius) - 4px) */
    --radius-md:    6px;   /* rounded-md / calc(var(--radius) - 2px) */
    --radius-lg:    8px;   /* var(--radius) — default */
    --radius-pill:  999px; /* tag chips, status pills */

    /* ── Shadow (Pulse shadow/xs) ───────────────────────────────────────
     * Verbatim from Figma: drop-shadow, color #0A0D120D (≈5 % black on
     * deep slate), offset 0/1, radius 2, spread 0. Used on cards and
     * elevated surfaces (kebab menus, dropdown panels).
     */
    --shadow-xs:   0 1px 2px 0 #0a0d120d;

    /* ── Layout track ───────────────────────────────────────────────────
     * Figma frames are designed at 1920px canvas with a 240px sidebar.
     * Right of the sidebar = 1680px; centred content track = 1328px,
     * giving 176px gutters when the viewport is full-width. The
     * sidebar is fixed-width.
     */
    --layout-sidebar-width:  240px;
    --layout-track-max:     1328px;
    --layout-track-gap:      16px;
}