/* Mario Stanković — Components & element system.  (v2)
   Depends on fonts.css, tokens.css, backgrounds.css.
   v2: cards/doc ground de-beiged (white / cool desk); squircle band-surfaces added; lemon accent. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--ms-font-body); color: var(--ms-ink);
       font-weight: var(--ms-w-regular); line-height: var(--ms-lh-body);
       -webkit-font-smoothing: antialiased; }

/* ============ Typography primitives ============ */
.kicker {
  font-family: var(--ms-font-mono); font-weight: var(--ms-w-medium);
  font-size: var(--ms-fs-kicker); letter-spacing: var(--ms-tracking-kicker);
  text-transform: uppercase; color: var(--ms-terracotta); margin: 0 0 var(--ms-4);
  display: inline-flex; align-items: center; gap: var(--ms-2);
}
.kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px;
  background: currentColor; display: inline-block; }

h1, h2, h3 { font-family: var(--ms-font-display); margin: 0; color: var(--ms-ink);
  line-height: var(--ms-lh-tight); letter-spacing: -0.02em; }
.display { font-weight: var(--ms-w-xbold); font-size: var(--ms-fs-display);
  line-height: var(--ms-lh-tight); letter-spacing: -0.02em; }
.h1 { font-weight: var(--ms-w-xbold); font-size: var(--ms-fs-h1); }
.h2 { font-weight: var(--ms-w-bold); font-size: var(--ms-fs-h2); line-height: var(--ms-lh-snug); }
.h3 { font-weight: var(--ms-w-bold); font-size: var(--ms-fs-h3); line-height: var(--ms-lh-snug); }

.lead { font-size: var(--ms-fs-lead); line-height: var(--ms-lh-body); color: var(--ms-ink-60); }
p { font-size: var(--ms-fs-body); line-height: var(--ms-lh-body); margin: 0 0 var(--ms-4); }
.small { font-size: var(--ms-fs-small); }
code { font-family: var(--ms-font-mono); font-size: 0.85em; background: var(--ms-line);
  padding: .15em .45em; border-radius: var(--ms-r-sm); }
strong, b { font-weight: var(--ms-w-bold); }
.accent-t { color: var(--ms-terracotta); } .accent-m { color: var(--ms-marigold); }
.accent-j { color: var(--ms-jade); }       .accent-p { color: var(--ms-petrol); }

/* On dark / rich surfaces */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--ms-on-dark); }
.on-dark .lead { color: var(--ms-on-dark-70); }
.on-dark .kicker { color: var(--ms-lemon); }

/* ============ Buttons / chips ============ */
.btn { font-family: var(--ms-font-display); font-weight: var(--ms-w-bold);
  font-size: var(--ms-fs-body); border: 0; border-radius: var(--ms-r-pill);
  padding: 12px 24px; background: var(--ms-primary); color: #fff;
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--ms-2);
  text-decoration: none; box-shadow: var(--ms-shadow-glow);
  transition: transform var(--ms-dur-fast) var(--ms-ease-emphasis), background var(--ms-dur-base); }
.btn:hover { transform: translateY(-2px); background: var(--ms-primary-600); }
.btn--cool  { background: var(--ms-petrol); box-shadow: none; }
.btn--accent{ background: var(--ms-marigold); color: var(--ms-navy); box-shadow: none; }
.btn--lemon { background: var(--ms-lemon); color: var(--ms-navy); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--ms-ink); box-shadow: inset 0 0 0 2px var(--ms-ink); }
.on-dark .btn--ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.btn--lg    { padding: var(--ms-4) var(--ms-6); font-size: var(--ms-fs-lead); }

.chip { font-family: var(--ms-font-display); font-weight: var(--ms-w-medium);
  font-size: var(--ms-fs-kicker); letter-spacing: .04em; border-radius: var(--ms-r-pill);
  padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--ms-lemon-200); color: var(--ms-navy); }
.chip--lemon { background: var(--ms-lemon); }
.chip--warm { background: var(--ms-terracotta-200); }
.chip--jade { background: var(--ms-jade-200); }
.chip--petrol { background: var(--ms-petrol-200); }

/* ============ Badges (status) ============ */
.badge { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em;
  border-radius: var(--ms-r-pill); font-size: var(--ms-fs-small); font-weight: var(--ms-w-medium); }
.badge::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--info    { background: rgba(33,109,122,.15); color: var(--ms-petrol); }
.badge--success { background: rgba(78,165,123,.18); color: #2f7d58; }
.badge--warning { background: rgba(235,143,80,.22); color: #a8632a; }
.badge--danger  { background: rgba(198,74,44,.15);  color: var(--ms-danger); }

/* ============ Cards / lists / KPIs ============ */
.card { background: var(--ms-surface); border: 1px solid var(--ms-line);
  border-radius: var(--ms-r-card); padding: var(--ms-6); box-shadow: var(--ms-shadow-sm);
  transition: box-shadow var(--ms-dur-base) var(--ms-ease-standard), transform var(--ms-dur-base) var(--ms-ease-standard); }
.card:hover { box-shadow: var(--ms-shadow-lg); transform: translateY(-4px); }
.card__k { width: 44px; height: 44px; border-radius: var(--ms-r-chip); margin-bottom: var(--ms-4);
  display: grid; place-items: center; font-family: var(--ms-font-display); font-weight: 700; color:#fff; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ms-4); }
.list li { position: relative; padding-left: 30px; font-size: var(--ms-fs-lead);
  line-height: var(--ms-lh-body); color: var(--ms-ink); }
.list li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 12px; border-radius: 4px; background: var(--ms-terracotta); }
.list li:nth-child(2n)::before { background: var(--ms-marigold); }
.list li:nth-child(3n)::before { background: var(--ms-jade); }
.list li:nth-child(4n)::before { background: var(--ms-petrol); }
.on-dark .list li { color: var(--ms-on-dark); }

.kpi { display: grid; gap: 6px; }
.kpi__num { font-family: var(--ms-font-display); font-weight: var(--ms-w-xbold);
  font-size: 3.052rem; line-height: 1; letter-spacing: -.02em; color: var(--ms-terracotta); }
.kpi__num.j { color: var(--ms-jade); } .kpi__num.p { color: var(--ms-petrol); }
.kpi__num.m { color: var(--ms-marigold); }
.kpi__label { font-size: var(--ms-fs-small); color: var(--ms-ink-60); }
.on-dark .kpi__label { color: var(--ms-on-dark-70); }

.divider { height: 1px; background: var(--ms-line); border: 0; margin: 0; }

/* ============ Form fields ============ */
.field { display: grid; gap: 6px; max-width: 360px; }
.field label { font-size: var(--ms-fs-small); font-weight: var(--ms-w-medium); }
.field input, .field select { font-family: var(--ms-font-body); font-size: var(--ms-fs-body);
  padding: .65em .9em; border: 2px solid var(--ms-line); border-radius: var(--ms-r-md);
  background: #fff; color: var(--ms-ink); transition: border-color var(--ms-dur-base); }
.field input:focus { outline: none; border-color: var(--ms-petrol);
  box-shadow: 0 0 0 3px rgba(33,109,122,.35); }

/* ============ Bar chart (CSS-only, for data) ============ */
.bars { display: grid; gap: var(--ms-4); }
.bar { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: var(--ms-4); }
.bar__label { font-size: var(--ms-fs-small); color: var(--ms-ink-60); }
.bar__track { height: 16px; border-radius: var(--ms-r-pill); background: var(--ms-line); overflow: hidden; }
.bar__fill  { height: 100%; border-radius: var(--ms-r-pill); background: var(--ms-petrol); }
.bar__fill.t { background: var(--ms-terracotta); } .bar__fill.m { background: var(--ms-marigold); }
.bar__fill.j { background: var(--ms-jade); }
.bar__val { font-family: var(--ms-font-display); font-weight: var(--ms-w-bold);
  font-size: var(--ms-fs-small); text-align: right; }

/* ============ Signature mark (concentric squircles) ============
   Inline SVG in markup; this sizes/positions it. */
.ms-mark { display: block; }
.ms-mark--float { animation: ms-float 16s var(--ms-ease-standard) infinite alternate; }
@keyframes ms-float { to { transform: translateY(-14px); } }

/* ============ Slide frame (16:9, 1280×720) ============ */
.slide { position: relative; width: var(--ms-slide-w); height: var(--ms-slide-h); overflow: hidden; }
.slide__inner { position: absolute; inset: 0; padding: var(--ms-slide-pad);
  display: flex; flex-direction: column; }
.spacer { flex: 1; }

/* ============ Doc / preview page chrome (foundations) ============ */
.doc { font-family: var(--ms-font-body); color: var(--ms-ink); background: var(--ms-desk);
  min-height: 100vh; padding: 56px 64px; }
.doc h1.page { font-family: var(--ms-font-display); font-weight: var(--ms-w-xbold);
  font-size: 2.5rem; margin: 0 0 6px; letter-spacing: -.02em; }
.doc .page-sub { color: var(--ms-ink-60); font-size: var(--ms-fs-lead); margin: 0 0 40px; }
.grid { display: grid; gap: 20px; }
.swatch { border-radius: var(--ms-r-md); overflow: hidden; box-shadow: var(--ms-shadow-sm);
  background: #fff; border: 1px solid var(--ms-line); }
.swatch .chiparea { height: 110px; }
.swatch .meta { padding: 12px 14px; }
.swatch .nm { font-family: var(--ms-font-display); font-weight: var(--ms-w-medium); font-size: 15px; }
.swatch .hex { color: var(--ms-ink-60); font-size: 13px; letter-spacing: .02em; font-family: var(--ms-font-mono); }
.section-label { font-family: var(--ms-font-display); font-weight: var(--ms-w-xbold);
  text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--ms-ink-40);
  margin: 40px 0 14px; }

/* ============ v2 · Squircle band-surfaces ============
   The surfaces ARE the design: coloured squircle panels, one palette slice each,
   Navy text on light bands, Paper text on dark bands.
   Usage: <div class="sq sq--jade"> … </div> */
.sq { border-radius: var(--ms-r-card); padding: var(--ms-6);
  color: var(--ms-navy); display: flex; flex-direction: column; }
.sq--panel { border-radius: var(--ms-r-panel); }
.sq--chip  { border-radius: var(--ms-r-chip); padding: var(--ms-4); }

.sq--lemon     { background: var(--ms-lemon);     color: var(--ms-navy); }
.sq--terracotta{ background: var(--ms-terracotta);color: var(--ms-navy); }
.sq--amber     { background: var(--ms-amber);     color: var(--ms-navy); }
.sq--marigold  { background: var(--ms-marigold);  color: var(--ms-navy); }
.sq--sage      { background: var(--ms-sage);      color: var(--ms-navy); }
.sq--jade      { background: var(--ms-jade);      color: var(--ms-navy); }
.sq--petrol    { background: var(--ms-petrol);    color: var(--ms-on-dark); }
.sq--navy      { background: var(--ms-navy);      color: var(--ms-on-dark); }
/* soft tint variants (Navy text) */
.sq--lemon-200     { background: var(--ms-lemon-200); }
.sq--marigold-200  { background: var(--ms-marigold-200); }
.sq--jade-200      { background: var(--ms-jade-200); }
.sq--petrol-200    { background: var(--ms-petrol-200); }
/* auto-flip text colour on dark bands */
.sq--petrol h1, .sq--petrol h2, .sq--petrol h3,
.sq--navy h1, .sq--navy h2, .sq--navy h3 { color: var(--ms-on-dark); }