/* ============================================================
   Noldus Design System — global stylesheet
   Wires the Figma-imported token system + brand fonts, and
   styles the design-system reference page chrome.
   ============================================================ */

/* Design tokens (Figma Variables → CSS custom properties) and
   bitmap asset classes, materialized from "Noldus DS update.fig". */
@import "./dist/fig-tokens.css";
@import "./dist/fig-assets.css";

/* Brand + component type stack.
   Typescale tokens resolve to "inter"; components paint in Roboto.
   Open Sans appears in a few product patterns. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600;700&display=swap");

/* ---- reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--schemes-on-surface);
  background: var(--ds-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- page-level theme surfaces ----------------------------- */
:root {
  --ds-canvas: #f4f5f5;
  --ds-surface: #ffffff;
  --ds-line: rgba(31, 31, 31, 0.10);
  --ds-line-strong: rgba(31, 31, 31, 0.16);
  --ds-muted: var(--schemes-on-surface-variant);
  --ds-sidebar: #ffffff;
  --ds-code-bg: #f0f3f2;
  --ds-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(16,42,38,.06);
}
:root[data-theme="dark"] {
  --ds-canvas: #0f1413;
  --ds-surface: #181d1c;
  --ds-line: rgba(255, 255, 255, 0.10);
  --ds-line-strong: rgba(255, 255, 255, 0.18);
  --ds-sidebar: #141918;
  --ds-code-bg: #11201c;
  --ds-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
}

/* ---- type scale helpers (M3 ramp from tokens) -------------- */
.ds-display-l { font-family:"Inter"; font-weight:600; font-size:57px; line-height:64px; letter-spacing:-0.25px; }
.ds-display-m { font-family:"Inter"; font-weight:600; font-size:45px; line-height:52px; }
.ds-display-s { font-family:"Inter"; font-weight:600; font-size:36px; line-height:44px; }
.ds-headline-l{ font-family:"Inter"; font-weight:600; font-size:32px; line-height:40px; }
.ds-headline-m{ font-family:"Inter"; font-weight:600; font-size:28px; line-height:36px; }
.ds-headline-s{ font-family:"Inter"; font-weight:600; font-size:24px; line-height:32px; }
.ds-title-l   { font-family:"Inter"; font-weight:500; font-size:22px; line-height:28px; }
.ds-title-m   { font-family:"Inter"; font-weight:500; font-size:16px; line-height:24px; letter-spacing:0.15px; }
.ds-title-s   { font-family:"Inter"; font-weight:500; font-size:14px; line-height:20px; letter-spacing:0.1px; }
.ds-body-l    { font-family:"Inter"; font-weight:400; font-size:16px; line-height:24px; letter-spacing:0.5px; }
.ds-body-m    { font-family:"Inter"; font-weight:400; font-size:14px; line-height:20px; letter-spacing:0.25px; }
.ds-body-s    { font-family:"Inter"; font-weight:400; font-size:12px; line-height:16px; letter-spacing:0.4px; }
.ds-label-l   { font-family:"Inter"; font-weight:500; font-size:14px; line-height:20px; letter-spacing:0.1px; }
.ds-label-m   { font-family:"Inter"; font-weight:500; font-size:12px; line-height:16px; letter-spacing:0.5px; }
.ds-label-s   { font-family:"Inter"; font-weight:500; font-size:11px; line-height:16px; letter-spacing:0.5px; }

/* ---- app shell -------------------------------------------- */
.ds-app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }

.ds-sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--ds-sidebar);
  border-right: 1px solid var(--ds-line);
  padding: 24px 16px 40px;
  display: flex; flex-direction: column; gap: 4px;
}
.ds-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; }
.ds-brand-mark { width: 34px; height: 34px; flex: none; }
.ds-brand-name { font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--schemes-on-surface); }
.ds-brand-sub  { font-size: 11px; color: var(--ds-muted); margin-top: 2px; letter-spacing:.02em; }

.ds-navgroup-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ds-muted); padding: 16px 10px 6px;
}
.ds-navlink {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--schemes-on-surface);
  text-decoration: none; cursor: pointer; border: none; background: none; text-align: left; width: 100%;
  transition: background .12s ease, color .12s ease;
}
.ds-navlink:hover { background: var(--schemes-containers-secondary-container, rgba(33,100,89,.08)); }
.ds-navlink.is-active { background: var(--schemes-primary-primary-default); color: #fff; }
.ds-navlink .dot { width:7px; height:7px; border-radius:50%; background: currentColor; opacity:.45; }

/* ---- content ---------------------------------------------- */
.ds-main { min-width: 0; }
.ds-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 40px; background: color-mix(in srgb, var(--ds-canvas) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--ds-line);
}
.ds-topbar h1 { margin: 0; font-size: 15px; font-weight: 600; }
.ds-topbar .crumb { color: var(--ds-muted); font-weight: 500; }

.ds-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--ds-line-strong); background: var(--ds-surface);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: var(--schemes-on-surface);
}
.ds-toggle:hover { border-color: var(--schemes-primary-primary-default); }

.ds-content { padding: 40px; max-width: 1180px; }
.ds-section { scroll-margin-top: 76px; margin-bottom: 64px; }
.ds-section > header { margin-bottom: 24px; }
.ds-section h2 { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--schemes-primary-primary-default); }
.ds-section .ds-section-title { font-size: 30px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.ds-section .ds-section-desc { color: var(--ds-muted); font-size: 15px; line-height: 1.55; max-width: 68ch; margin: 0; }

.ds-subhead { font-size: 13px; font-weight: 700; letter-spacing:.04em; text-transform: uppercase; color: var(--ds-muted); margin: 32px 0 14px; }

/* cards / specimen surfaces */
.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: 16px; box-shadow: var(--ds-shadow);
}
.ds-specimen {
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: 16px; padding: 28px; box-shadow: var(--ds-shadow);
}
.ds-specimen-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px; }
.ds-specimen-head h4 { margin:0; font-size:16px; font-weight:600; }
.ds-specimen-head .tag { font-size:11px; font-weight:600; color:var(--ds-muted); font-family:"Roboto Mono", ui-monospace, monospace; }

.ds-grid { display: grid; gap: 20px; }
.ds-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.ds-row.tight { gap: 12px; }
.ds-stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

.ds-state-label { font-size:11px; font-weight:600; color:var(--ds-muted); font-family:"Roboto Mono", ui-monospace, monospace; margin-bottom:8px; }
.ds-cell { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.ds-cell.center { align-items:center; text-align:center; }

/* color swatches */
.ds-swatches { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:14px; }
.ds-swatch { border:1px solid var(--ds-line); border-radius:12px; overflow:hidden; background:var(--ds-surface); }
.ds-swatch .chip { height:68px; }
.ds-swatch .meta { padding:10px 12px; }
.ds-swatch .name { font-size:12.5px; font-weight:600; }
.ds-swatch .val { font-size:11px; color:var(--ds-muted); font-family:"Roboto Mono", ui-monospace, monospace; margin-top:2px; }

/* type ramp rows */
.ds-typerow { display:grid; grid-template-columns: 150px minmax(0,1fr); gap:24px; align-items:baseline; padding:16px 0; border-top:1px solid var(--ds-line); }
.ds-typerow .key { font-size:12px; color:var(--ds-muted); font-family:"Roboto Mono", ui-monospace, monospace; line-height:1.5; }
.ds-typerow .key b { display:block; color:var(--schemes-on-surface); font-family:"Inter"; font-size:13px; }

/* spacing + radius */
.ds-token-line { display:flex; align-items:center; gap:16px; padding:8px 0; }
.ds-token-line .lbl { width:120px; font-family:"Roboto Mono", ui-monospace, monospace; font-size:12px; color:var(--ds-muted); }
.ds-token-line .bar { height:18px; border-radius:4px; background:var(--schemes-primary-primary-default); }
.ds-token-line .px  { font-family:"Roboto Mono", ui-monospace, monospace; font-size:12px; color:var(--ds-muted); }
.ds-radii { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:16px; }
.ds-radius { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ds-radius .box { width:84px; height:64px; background:var(--schemes-containers-primary-container); border:1px solid var(--schemes-primary-primary-default); }
.ds-radius .lbl { font-family:"Roboto Mono", ui-monospace, monospace; font-size:11px; color:var(--ds-muted); text-align:center; }

/* icon gallery */
.ds-icons { display:grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap:8px; }
.ds-icon-cell { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 6px; border:1px solid var(--ds-line); border-radius:12px; background:var(--ds-surface); }
.ds-icon-cell .nm { font-size:10.5px; color:var(--ds-muted); font-family:"Roboto Mono", ui-monospace, monospace; text-align:center; word-break:break-word; line-height:1.3; }
.ds-icon-cell svg, .ds-icon-cell [class] { color: var(--schemes-on-surface); }

/* misc */
.ds-note { font-size:12.5px; color:var(--ds-muted); line-height:1.5; }
.ds-divider { height:1px; background:var(--ds-line); border:0; margin:0; }
code.tok { font-family:"Roboto Mono", ui-monospace, monospace; font-size:12px; background:var(--ds-code-bg); padding:2px 6px; border-radius:6px; color:var(--schemes-on-surface); }

/* let fixed-size Figma frames sit on their own baseline */
.ds-frame-wrap { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }