/*
 * Colorcon design — tokens
 *
 * Drop-in `:root` custom properties distilled from colorcon.com (the `zh`
 * locale of the corporate brand site). Every value here was
 * measured, not guessed — provenance and raw numbers live in
 * `references/extraction-2026-10-29.md`.
 *
 * Two consumers:
 *   1. Razor / WeChat webviews  → backend/src/NextEvent.WechatFrontend.Host/wwwroot/css/brand-tokens.css
 *   2. live_player H5           → imported once from live_player/src/index.css
 *
 * The `[data-brand-surface="dark"]` block at the bottom is deliberately
 * COMMENTED OUT. It is the sanctioned translation of this language onto
 * a dark surface (live_player). Uncomment per-surface, never globally.
 */

:root {
  /* ── Type families ────────────────────────────────────────────────
   * acumin-pro (body) and greycliff-cf (display) are licensed webfaces
   * hosted by the brand CDN. NEVER self-host or redistribute them.
   * These stacks are the fallback ladder only — see SKILL.md
   * "Font strategy".
   */
  --bsd-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --bsd-font-display: "Greycliff CF", "Greycliff", "Poppins", "Nunito Sans", "Avenir Next",
    "Segoe UI", system-ui, "Noto Sans SC", "Source Han Sans SC", "PingFang SC", sans-serif;
  --bsd-font-cjk: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ── Ink & surface ──────────────────────────────────────────────── */
  --bsd-ink: #000;              /* body text — the site uses pure black, not near-black */
  --bsd-inverse: #fff;          /* text on dark / pink / photography */
  --bsd-surface: #fff;          /* default page surface */
  --bsd-surface-grey: #f3f3f3;  /* card image placeholder, level-3 nav hover */
  --bsd-hairline: #ccc;         /* section + nav bottom rules, table lines */
  --bsd-border-strong: #606060; /* input / textarea borders, secondary borders */
  --bsd-muted: #999;            /* disabled link */
  --bsd-error: #c30000;         /* form validation text */

  /* ── Brand pink — the single accent ─────────────────────────────── */
  --bsd-pink: #e30a7d;          /* links, active dot, badge bg, hover fill, arrows, focus */
  --bsd-pink-alt: #e1097c;      /* pressed variant + spectrum end-stop */
  --bsd-pink-bright: #ef0087;   /* gradient end-stop */

  /* ── Cyan family — the primary action colour ────────────────────── */
  --bsd-cyan: #0080c9;          /* default button background */
  --bsd-cyan-light: #2babe3;    /* .bg--lightblue, gradient stops */
  --bsd-cyan-label: #1d9ed9;    /* card category labels */

  /* ── Deep teal — the only dark surface ──────────────────────────── */
  --bsd-teal: #065c78;          /* dark section bg, pale-blue button text */
  --bsd-teal-sea: #70bab8;      /* .button--green, .bg--green */

  /* ── Pale washes ────────────────────────────────────────────────── */
  --bsd-blue-pale: #e5f7fd;     /* pale button bg */
  --bsd-blue-wash: #ebf3ff;     /* nav level-2 rows, mega-menu category rail, list-section bg */
  --bsd-blue-wash-alt: #eaf3ff; /* authored duplicate of the wash — keep for parity */
  --bsd-green-pale: #e6eef1;    /* .bg--lightgreen, hover of pale blue */

  /* ── Spectrum — the 20px signature bar ──────────────────────────── */
  --bsd-spectrum-0: #fbe518;    /* 0%   */
  --bsd-spectrum-1: #86c030;    /* 12%  */
  --bsd-spectrum-2: #009447;    /* 34%  */
  --bsd-spectrum-3: #00a0a8;    /* 58%  */
  --bsd-spectrum-4: #1d9dd7;    /* 77%  */
  --bsd-spectrum-5: #9172da;    /* 91%  */
  --bsd-spectrum-6: #e1097c;    /* 100% */
  --bsd-spectrum-height: 20px;

  --bsd-spectrum: linear-gradient(
    90deg,
    var(--bsd-spectrum-0),
    var(--bsd-spectrum-1) 12%,
    var(--bsd-spectrum-2) 34%,
    var(--bsd-spectrum-3) 58%,
    var(--bsd-spectrum-4) 77%,
    var(--bsd-spectrum-5) 91%,
    var(--bsd-spectrum-6)
  );
  /* vertical variant — bottom of dark blocks */
  --bsd-spectrum-vertical: linear-gradient(
    0deg,
    var(--bsd-spectrum-0),
    var(--bsd-spectrum-1) 12%,
    var(--bsd-spectrum-2) 34%,
    var(--bsd-spectrum-3) 58%,
    var(--bsd-spectrum-4) 77%,
    var(--bsd-spectrum-5) 91%,
    var(--bsd-spectrum-6)
  );

  /* ── Logo mark — the four hexagon quadrants (from the official SVG,
   *    https://www.colorcon.com/hubfs/web/colorcon-logo.svg). These are
   *    the mark's exact fills; they differ slightly from the spectrum
   *    stops above — use these when recreating the mark, never invent.
   */
  --bsd-mark-pink: #e30a7d;
  --bsd-mark-yellow: #fce315;
  --bsd-mark-green: #009548;
  --bsd-mark-blue: #1d9ed9;

  /* Aspect ratios — see SKILL.md §4.9 for the asset-to-job mapping */
  --bsd-logo-ratio-wide: 2.113;   /* logo_colorcon.png 2550×1207 — preferred UI logo */
  --bsd-logo-ratio-square: 1;     /* logo_new.png / logo.jpg / sales_logo.png 721×719 */

  /* ── Type scale (desktop → ≤1024 → ≤991) ─────────────────────────── */
  --bsd-root: 18px;             /* html font-size, desktop */
  --bsd-root-mobile: 16px;      /* html font-size, ≤991 */
  --bsd-leading-body: 1.5;

  --bsd-text-h1: 65px;
  --bsd-text-h1-tablet: 42px;
  --bsd-text-h1-mobile: 38px;
  --bsd-track-h1: -2px;
  --bsd-track-h1-tablet: -2px;
  --bsd-track-h1-mobile: -1px;
  --bsd-leading-h1: 1.05em;

  --bsd-text-h2: 50px;
  --bsd-text-h2-tablet: 34px;
  --bsd-text-h2-mobile: 28px;
  --bsd-track-h2: -1px;
  --bsd-leading-h2: 1.1em;

  --bsd-text-h3: 32px;
  --bsd-text-h3-tablet: 26px;
  --bsd-text-h3-mobile: 24px;
  --bsd-track-h3: -1px;
  --bsd-leading-h3: 1.1em;

  --bsd-text-h4: 26px;
  --bsd-text-h4-tablet: 22px;
  --bsd-text-h4-mobile: 20px;
  --bsd-track-h4: -0.5px;
  --bsd-leading-h4: 1.1em;

  --bsd-text-h5: 28px;
  --bsd-leading-h5: 1.1em;

  --bsd-text-body: 18px;
  --bsd-text-body-mobile: 16px;
  --bsd-leading-body-tight: 1.4em;

  --bsd-text-large: 25px;
  --bsd-text-large-tablet: 20px;
  --bsd-text-small: 14px;

  --bsd-text-nav: 16px;         /* nav depth-1 (700) / utility (300) */
  --bsd-text-link: 18px;        /* .link, 600; 16 at ≤991 */
  --bsd-text-link-mobile: 16px;
  --bsd-text-button: 18px;
  --bsd-text-button-small: 16px;
  --bsd-text-button-small-mobile: 14px;
  --bsd-text-label: 16px;       /* form label, 400 */
  --bsd-text-input: 18px;       /* 16 at ≤991 */
  --bsd-text-input-mobile: 16px;
  --bsd-text-overline: 14px;    /* eyebrow / badge / card category */
  --bsd-text-overline-sm: 12px;
  --bsd-track-overline: 1.5px;  /* the ONLY positive tracking in the system */
  --bsd-text-breadcrumb: 12px;  /* 11 at ≤1199 */
  --bsd-text-breadcrumb-alt: 11px;
  --bsd-text-hero-label: 22px;  /* 18 at ≤991 */
  --bsd-text-hero-label-mobile: 18px;

  /* ── Spacing ladder — 5/10/15/20/30/40/100, no 8px grid ─────────── */
  --bsd-space-5: 5px;
  --bsd-space-10: 10px;
  --bsd-space-15: 15px;
  --bsd-space-20: 20px;
  --bsd-space-30: 30px;
  --bsd-space-40: 40px;
  --bsd-space-100: 100px;

  /* ── Section rhythm ─────────────────────────────────────────────── */
  --bsd-section-pad: 100px;
  --bsd-section-pad-tablet: 80px;  /* ≤991 */
  --bsd-section-pad-mobile: 50px;  /* ≤767 */

  /* ── Radii ladder ───────────────────────────────────────────────── */
  --bsd-radius-input: 10px;
  --bsd-radius-dot: 20px;
  --bsd-radius-pill: 30px;
  --bsd-radius-card: 40px;
  --bsd-radius-circle: 50%;

  /* ── Shadows — warm-grey, offset down-right, never centred glow ─── */
  --bsd-shadow-card: 5px 5px 24px rgba(0, 0, 0, 0.2);
  --bsd-shadow-dropdown: 0 2px 2px rgba(0, 0, 0, 0.2);
  --bsd-shadow-mega: 7px 15px 24px rgba(0, 0, 0, 0.2);

  /* ── Containers ─────────────────────────────────────────────────── */
  --bsd-container: 1320px;
  --bsd-container-reading: 1100px;
  --bsd-container-narrow: 880px;

  /* ── Motion — flat, tonal, no keyframes ─────────────────────────── */
  --bsd-dur: 0.15s;
  --bsd-ease: ease-out;
  --bsd-transition: 0.15s ease-out;
  --bsd-transition-slider: 0.15s ease-in-out;

  /* ── Breakpoints (max-width, desktop-first) — CSS vars can't drive
   *    media queries; kept as documentation for JS/SCSS consumers.
   *      1399px  breadcrumb width
   *      1350px  mega-menu min-height (paired 1200 min)
   *      1200px  mega-menu min
   *      1199px  search border 2→1px, breadcrumbs go static
   *      1024px  h1 42 / h2 34 / h3 26 / h4 22 / text--large 20
   *      991px   root 16px, h1 38 / h2 28 / h3 24 / h4 20,
   *              section padding 80, buttons+inputs shrink, nav → hamburger
   *      768/767px  section padding 50, pad-bottom 50
   *      568px   device-specific
   *      480/400px  device-specific
   * ──────────────────────────────────────────────────────────────── */
}

/* ══════════════════════════════════════════════════════════════════
 * USAGE — drive the scale from these vars instead of retyping px:
 *
 *   h1 { font-size: var(--bsd-text-h1); letter-spacing: var(--bsd-track-h1);
 *        font-weight: 500; line-height: var(--bsd-leading-h1); }
 *
 *   @media (max-width: 1024px) {
 *     h1 { font-size: var(--bsd-text-h1-tablet); letter-spacing: var(--bsd-track-h1-tablet); }
 *   }
 *   @media (max-width: 991px) {
 *     html { font-size: var(--bsd-root-mobile); }
 *     h1 { font-size: var(--bsd-text-h1-mobile); letter-spacing: var(--bsd-track-h1-mobile); }
 *   }
 *
 *   section { padding-top: var(--bsd-section-pad); }
 *   @media (max-width: 991px) { section { padding-top: var(--bsd-section-pad-tablet); } }
 *   @media (max-width: 767px) { section { padding-top: var(--bsd-section-pad-mobile); } }
 *
 *   .spectrum { height: var(--bsd-spectrum-height); background-image: var(--bsd-spectrum); }
 * ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
 * DARK SURFACE — the only sanctioned dark translation.
 *
 * The source site has NO dark mode; it has explicit dark sections on
 * `#065C78`. This block is the mechanism for putting that section
 * language on a full-page dark surface (live_player). [inference]
 *
 * Rules:
 *   - deep teal, never purple/indigo, never pure black-on-violet glass
 *   - `--bsd-pink` stays the ONLY accent
 *   - the spectrum bar stays, once per surface, edge to edge
 *   - hairlines invert to low-alpha white; shadows deepen
 *   - body type stays the body grotesque, NOT Inter-by-default
 *
 * Uncomment per-surface:
 *
 * [data-brand-surface="dark"] {
 *   --bsd-canvas: #041f2a;
 *   --bsd-surface: #062b39;
 *   --bsd-surface-raised: #065c78;
 *   --bsd-ink: #fff;
 *   --bsd-inverse: #000;
 *   --bsd-hairline: rgba(255, 255, 255, 0.18);
 *   --bsd-border-strong: rgba(255, 255, 255, 0.34);
 *   --bsd-muted: rgba(255, 255, 255, 0.62);
 *   --bsd-shadow-card: 5px 5px 24px rgba(0, 0, 0, 0.45);
 *   --bsd-shadow-dropdown: 0 2px 2px rgba(0, 0, 0, 0.45);
 *
 *   background-color: var(--bsd-canvas);
 *   color: var(--bsd-ink);
 * }
 *
 * [data-brand-surface="dark"] a { color: var(--bsd-pink); }
 * [data-brand-surface="dark"] .bsd-spectrum { background-image: var(--bsd-spectrum); }
 * ══════════════════════════════════════════════════════════════════ */