/* Klang Design System — Colors & Type tokens
 * Import this on every page. Geist + Material Symbols Rounded.
 *
 * Geist is loaded by the host site (via WOFF2 in klang-help, TTF in klang-api-docs);
 * this file only sets `--font-sans`, it does not register the font.
 * Material Symbols Rounded is loaded as a <link> in BaseLayout with an explicit
 * icon_names list to keep the font download small.
 */

:root {
  /* ── Brand primary (Klang blue) ───────────────────────── */
  --klang-blue:          #212BFA;  /* primary. The single most prominent color. */
  --klang-blue-light:    #99B6FF;
  --klang-blue-dark:     #000052;

  /* ── Brand secondary (Klang orange) ───────────────────── */
  --klang-orange:        #FF8E00;
  --klang-orange-light:  #FFB04C;
  --klang-orange-dark:   #B36300;   /* derived complementary dark */

  /* ── Surface / background ─────────────────────────────── */
  --klang-warm-gray:     #F1EEE6;   /* default light background */
  --klang-warm-gray-light:#FAF8F3;   /* lighter beige for surfaces and code blocks */
  --klang-white:         #FFFFFF;
  --klang-black:         #000000;

  /* ── Semantic (MUI defaults) ──────────────────────────── */
  --mui-info:            #2E96FF;
  --mui-success:         #2E7D32;
  --mui-warning:         #EF6C00;
  --mui-error:           #D32F2F;

  /* ── Text (MUI text.* on warm-gray) ───────────────────── */
  --text-primary:        rgba(0, 0, 0, 0.87);
  --text-secondary:      rgba(0, 0, 0, 0.60);
  --text-disabled:       rgba(0, 0, 0, 0.38);
  --text-on-primary:     #FFFFFF;

  /* ── Borders / dividers (MUI) ─────────────────────────── */
  --divider:             rgba(0, 0, 0, 0.12);
  --border-subtle:       rgba(0, 0, 0, 0.08);
  --border-strong:       rgba(0, 0, 0, 0.23);

  /* ── Neutrals (MUI grey scale) ────────────────────────── */
  --grey-50:  #FAFAFA;
  --grey-100: #F5F5F5;
  --grey-200: #EEEEEE;
  --grey-300: #E0E0E0;
  --grey-400: #BDBDBD;
  --grey-500: #9E9E9E;
  --grey-600: #757575;
  --grey-700: #616161;
  --grey-800: #424242;
  --grey-900: #212121;

  /* ── Spacing (8px grid) ───────────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-button: 8px;
  --radius-card:   16px;
  --radius-pill:   9999px;
  --radius-chip:   16px;
  --radius-input:  4px;   /* MUI default */

  /* ── Elevation (MUI) ──────────────────────────────────── */
  --elev-1: 0px 1px 3px 0px rgba(0,0,0,0.12), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.2);
  --elev-2: 0px 3px 1px -2px rgba(0,0,0,0.2),  0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
  --elev-4: 0px 2px 4px -1px rgba(0,0,0,0.2),  0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
  --elev-8: 0px 5px 5px -3px rgba(0,0,0,0.2),  0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;

  /* ── Type family ──────────────────────────────────────── */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────
   The body `background` from klang-api-docs's copy is intentionally omitted;
   klang-help sets `background` via its own Tailwind utility (`bg-klang-bg`)
   so the homepage and help pages can pick their own canvas. */
html, body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typography scale ─────────────────────────────────── */
.k-heading-xl { font-weight: 300; font-size: 48px; line-height: 53px; letter-spacing: -0.01em; }
.k-heading-l  { font-weight: 300; font-size: 48px; line-height: 56px; letter-spacing: -0.01em; }
.k-heading-m  { font-weight: 400; font-size: 32px; line-height: 40px; }
.k-heading-s  { font-weight: 600; font-size: 16px; line-height: 24px; }
.k-body       { font-weight: 400; font-size: 16px; line-height: 24px; }
.k-body-bold  { font-weight: 600; font-size: 16px; line-height: 24px; }
.k-caption    { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--text-secondary); }

/* The bare-element type rules from klang-api-docs's copy of this file are
   intentionally omitted here so Tailwind Typography (prose) stays authoritative
   for article body styling. Use `.docs-page__h1` / `.docs-page__lead` etc. for
   page-chrome typography (defined in shared.css). */
strong, b { font-weight: 600; }

/* ── Buttons ──────────────────────────────────────────── */
.k-btn {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  user-select: none;
  text-decoration: none;
}
.k-btn:hover { text-decoration: none; }
.k-btn--primary      { background: var(--klang-blue); color: #fff; }
.k-btn--primary:hover{ background: #1a22d4; }
.k-btn--outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.k-btn--outline-dark:hover{ border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); }
.k-btn--outline-light{ background: transparent; color: var(--text-primary); border-color: rgba(0,0,0,0.3); }
.k-btn--outline-light:hover{ border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.04); }

/* Square-radius UI button (MUI-style, for in-product) */
.k-btn--square { border-radius: var(--radius-button); }

/* ── Material Symbols ─────────────────────────────────── */
.msr {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  text-transform: none;
  letter-spacing: normal;
}
.msr--illustrative {
  font-size: 48px;
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}