/* ============================================================
   Crescendo Lab — Colors & Type
   Source of truth: /CL Website System Test.fig (Style frame)
   ============================================================ */

/* ---- Webfonts ----
   Fonts are not imported here. Each page links only what its language needs
   (src/head.ts for the site, docs/build.mjs for /docs): TT Commons Pro from the
   Adobe Fonts kit, and the Noto Sans face for the page's CJK or Thai script.
   An @import here made every page wait for this file, then for the font CSS,
   before anything could render. */

:root {
  /* ============================================================
     COLOR — Crescendo brand palette (extracted from Figma)
     ============================================================ */

  /* Brand blues — the core "Crescendo Blue" identity */
  --cl-blue: rgb(80, 144, 255); /* Primary brand blue. 959× usage. */
  --cl-blue-deep: rgb(63, 123, 255); /* Gradient-start. Darker brand blue. */
  --cl-blue-light: rgb(128, 187, 255); /* Gradient-end. Lighter brand blue. */
  --cl-blue-pressed: rgb(69, 134, 240); /* Hover/active. */
  --cl-blue-deepest: rgb(31, 73, 163); /* On-brand-dark text. */
  --cl-blue-10: rgba(80, 144, 255, 0.1); /* Tint chips, icon tile bg. */
  --cl-blue-bg: rgb(226, 239, 255); /* Soft brand surface. 6438× — top fill. */
  --cl-blue-bg-2: rgb(238, 244, 255); /* Even softer brand surface. */

  /* Neutral foregrounds */
  --cl-fg-1: rgb(34, 42, 54); /* Primary text — headings & body. 658× */
  --cl-fg-2: rgb(77, 89, 119); /* Secondary text — descriptions. */
  --cl-fg-3: rgb(107, 114, 128); /* Tertiary text — meta. */
  --cl-fg-4: rgb(140, 156, 171); /* Quaternary — placeholder. */
  --cl-fg-muted: rgb(147, 155, 160); /* "Icon Gery" — UI iconography. */

  /* Neutral surfaces */
  --cl-bg: rgb(255, 255, 255);
  --cl-bg-tint: rgb(248, 249, 252); /* "Background Gray" — page sections. #F8F9FC */
  --cl-bg-card: rgb(241, 242, 249); /* "Card Gray" — card surface tint. #F1F2F9 */
  --cl-bg-card-alt: rgb(228, 228, 228); /* Placeholder card surface. */
  --cl-border: rgb(228, 228, 228);
  --cl-border-soft: rgb(238, 238, 238); /* Secondary button border. */
  --cl-border-strong: rgb(215, 222, 228);

  /* Accents */
  --cl-ai-purple: rgb(128, 32, 248); /* "AI Purple" — AI-features only. */
  --cl-ai-purple-soft: rgb(164, 156, 255); /* AI gradient endpoint. */
  --cl-success: rgb(6, 199, 85);

  /* Text on light surfaces. The brand blue and green are for fills, icons and
     large type; small text in them reads at about 3:1, so text uses these darker
     shades of the same hues, which reach 4.5:1 (WCAG AA) on every light surface
     the site uses (white, --cl-bg-tint, --cl-blue-bg-2). */
  --cl-blue-text: #035fff;
  --cl-success-text: #047f36;

  /* Gradients */
  --cl-gradient-blue: linear-gradient(
    180deg,
    rgb(63, 123, 255) 0%,
    rgb(80, 144, 255) 46%,
    rgb(128, 187, 255) 100%
  );
  --cl-gradient-blue-h: linear-gradient(
    90deg,
    rgb(63, 123, 255) 0%,
    rgb(80, 144, 255) 46%,
    rgb(128, 187, 255) 100%
  );
  --cl-gradient-grey: linear-gradient(180deg, rgb(193, 193, 193) 17%, rgb(231, 231, 231) 100%);

  /* Shadows — soft, blue-tinted, inset highlight on brand buttons */
  --cl-shadow-card: 0px 0px 15px 0px rgba(0, 64, 193, 0.05);
  --cl-shadow-card-blue: 0px 0px 15px 0px rgba(80, 144, 255, 0.1);
  --cl-shadow-elev: 0px 8px 32px 0px rgba(34, 59, 83, 0.12);
  --cl-shadow-soft: 0px 4px 16px 0px rgba(34, 59, 83, 0.08);
  --cl-inset-highlight: inset 0px -8px 15px 0px rgba(255, 255, 255, 0.25);

  /* ============================================================
     TYPE — Crescendo type scale
     Primary: Noto Sans TC (Traditional Chinese + Latin)
     Display latin/numerals: Inter (Bold/ExtraBold)
     Mono/UI numerals: Roboto
     ============================================================ */
  /* Per-script rules:
     • English  → TT Commons
     • Chinese  → Noto Sans TC
     • Japanese → Noto Sans JP
     • Thai     → Noto Sans Thai
     The fallback chain below puts TT Commons first (Latin), then each Noto
     face is picked up automatically by the browser for its respective script. */
  --cl-font-sans:
    "tt-commons-pro", "Noto Sans TC", "Noto Sans JP", "Noto Sans Thai", "PingFang TC",
    "Helvetica Neue", system-ui, sans-serif;
  --cl-font-display:
    "tt-commons-pro", "Noto Sans TC", "Noto Sans JP", "Noto Sans Thai", system-ui, sans-serif;
  --cl-font-ui:
    "tt-commons-pro", "Noto Sans TC", "Noto Sans JP", "Noto Sans Thai", system-ui, sans-serif;
  /* Per-script explicit stacks, when you want to force a single language */
  --cl-font-en: "tt-commons-pro", system-ui, sans-serif;
  --cl-font-zh: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --cl-font-ja: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --cl-font-th: "Noto Sans Thai", system-ui, sans-serif;

  /* Type sizes (px) — keys mirror Figma names */
  --cl-text-xs: 12.8px; /* 0.8em  */
  --cl-text-s: 14.4px; /* 0.9em  */
  --cl-text-m: 16px; /* 1em    */
  --cl-text-l: 17.6px; /* 1.1em  */
  --cl-text-xl: 24px; /* 1.5em  */
  --cl-text-xxl: 32px; /* 2em    */
  --cl-text-metric: 64px; /* 4em    */
  --cl-text-metric-xl: 80px; /* 5em    */

  /* Heading sizes */
  --cl-heading-m: 24px; /* H3 card title */
  --cl-heading-l: 32px; /* H3 product title */
  --cl-heading-xl: 40px; /* H2 section title */
  --cl-heading-xxl: 56px; /* H1 hero */

  /* Paragraph sizes */
  --cl-para-m: 16px;
  --cl-para-l: 17.6px;
  --cl-para-xl: 20px;
  --cl-para-xxl: 80px; /* Display paragraph (rare) */

  /* Line-heights */
  --cl-lh-tight: 1.2;
  --cl-lh-snug: 1.3;
  --cl-lh-normal: 1.5;
  --cl-lh-body: 1.6;
  --cl-lh-loose: 1.8;

  /* Weights */
  --cl-w-regular: 400;
  --cl-w-medium: 500;
  --cl-w-semibold: 600;
  --cl-w-bold: 700;

  /* ============================================================
     SPACING — Gap & padding tokens (Figma "Size" frame)
     ============================================================ */
  --cl-gap-xxs: 8px;
  --cl-gap-xs: 12px;
  --cl-gap-s: 16px;
  --cl-gap-m: 24px;
  --cl-gap-l: 32px;
  --cl-gap-xl: 40px;
  --cl-gap-xl-plus: 48px;
  --cl-gap-xxl: 64px;
  --cl-gap-xxxl: 80px;

  --cl-card-pad-l: 40px;
  --cl-card-pad-xl: 64px;

  --cl-section-spacing: 128px; /* between page sections */
  --cl-global-padding: 96px; /* page side padding */
  --cl-hero-padding: 24px; /* mobile hero side padding */

  /* ============================================================
     RADII
     ============================================================ */
  --cl-radius-xs: 8px;
  --cl-radius-s: 12px;
  --cl-radius-m: 20px;
  --cl-radius-l: 32px;
  --cl-radius-full: 100em;
  --cl-radius-pill: 200px; /* button radius */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --cl-max-width: 1280px;
  --cl-content-w: 1200px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these directly: <h1 class="cl-h1">…</h1>
   ============================================================ */

.cl-h1,
.cl-heading-xxl {
  font-family: var(--cl-font-sans);
  font-weight: var(--cl-w-bold);
  font-size: var(--cl-heading-xxl);
  line-height: var(--cl-lh-tight);
  color: var(--cl-fg-1);
  letter-spacing: -0.01em;
}
.cl-h2,
.cl-heading-xl {
  font-family: var(--cl-font-sans);
  font-weight: var(--cl-w-bold);
  font-size: var(--cl-heading-xl);
  line-height: var(--cl-lh-snug);
  color: var(--cl-fg-1);
}
.cl-h3,
.cl-heading-l {
  font-family: var(--cl-font-sans);
  font-weight: var(--cl-w-bold);
  font-size: var(--cl-heading-l);
  line-height: var(--cl-lh-tight);
  color: var(--cl-fg-1);
}
.cl-h4,
.cl-heading-m {
  font-family: var(--cl-font-sans);
  font-weight: var(--cl-w-bold);
  font-size: var(--cl-heading-m);
  line-height: var(--cl-lh-snug);
  color: var(--cl-fg-1);
}

.cl-p-xl {
  font-family: var(--cl-font-sans);
  font-size: var(--cl-para-xl);
  line-height: var(--cl-lh-loose);
  color: var(--cl-fg-2);
}
.cl-p-l {
  font-family: var(--cl-font-sans);
  font-size: var(--cl-para-l);
  line-height: var(--cl-lh-body);
  color: var(--cl-fg-2);
}
.cl-p,
.cl-p-m {
  font-family: var(--cl-font-sans);
  font-size: var(--cl-para-m);
  line-height: var(--cl-lh-body);
  color: var(--cl-fg-2);
}
.cl-p-s {
  font-family: var(--cl-font-sans);
  font-size: var(--cl-text-s);
  line-height: var(--cl-lh-body);
  color: var(--cl-fg-3);
}
.cl-p-xs {
  font-family: var(--cl-font-sans);
  font-size: var(--cl-text-xs);
  line-height: var(--cl-lh-normal);
  color: var(--cl-fg-3);
}

.cl-metric {
  font-family: var(--cl-font-display);
  font-weight: var(--cl-w-bold);
  font-size: var(--cl-text-metric);
  line-height: 1;
  color: var(--cl-blue);
}
.cl-metric-xl {
  font-family: var(--cl-font-display);
  font-weight: var(--cl-w-bold);
  font-size: var(--cl-text-metric-xl);
  line-height: 1;
  color: var(--cl-blue);
}

.cl-eyebrow {
  font-family: var(--cl-font-sans);
  font-weight: var(--cl-w-medium);
  font-size: var(--cl-text-s);
  line-height: 1;
  color: var(--cl-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Base reset for design-system pages ---- */
.cl-root {
  font-family: var(--cl-font-sans);
  color: var(--cl-fg-1);
  background: var(--cl-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cl-root * {
  box-sizing: border-box;
}