/* ============================================================
   SCS — SIXTEENS CONSULTANCY SERVICES
   Design tokens · v1.0 · 2026-04
   "Assisting Excellence, Ensuring Stability"
   ============================================================ */

:root {
  /* ── Brand ────────────────────────────────────────────────── */
  --scs-orange:        #E04A1F;
  --scs-orange-700:    #B73A14;
  --scs-orange-300:    #F2A98E;
  --scs-orange-100:    #FBE4DA;
  --scs-orange-50:     #FDF1EB;

  /* ── Ink ─────────────────────────────────────────────────── */
  --scs-ink:           #0B1220;
  --scs-ink-800:       #141C2E;
  --scs-ink-700:       #1F2940;
  --scs-ink-500:       #3A4258;

  /* ── Steel ───────────────────────────────────────────────── */
  --steel-900:         #14171C;
  --steel-700:         #3D434E;
  --steel-500:         #6B717E;
  --steel-400:         #9098A4;
  --steel-300:         #BFC4CC;
  --steel-200:         #DCDFE4;
  --steel-150:         #E7E9ED;
  --steel-100:         #F1F2F5;
  --steel-50:          #F7F8FA;

  /* ── Paper ───────────────────────────────────────────────── */
  --paper:             #FFFFFF;
  --paper-warm:        #FAF8F5;
  --paper-cool:        #F7F8FA;

  /* ── Semantic ─────────────────────────────────────────────── */
  --signal-go:         #1F7A4D;
  --signal-warn:       #C77A0A;
  --signal-stop:       #B33028;
  --signal-info:       #21508A;

  /* ── Type ────────────────────────────────────────────────── */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "JetBrains Mono", monospace;

  --t-xs:     11px;
  --t-sm:     13px;
  --t-base:   16px;
  --t-md:     18px;
  --t-lg:     22px;
  --t-xl:     28px;
  --t-2xl:    36px;
  --t-3xl:    48px;
  --t-4xl:    64px;
  --t-5xl:    88px;
  --t-6xl:    128px;

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-base:   1.55;
  --lh-loose:  1.72;

  --tr-tight:  -0.02em;
  --tr-base:    0em;
  --tr-wide:   0.08em;
  --tr-wider:  0.18em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ── Geometry ─────────────────────────────────────────────── */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  --hairline:    1px;
  --rule:        2px;
  --rule-bold:   3px;

  /* ── Elevation ───────────────────────────────────────────── */
  --shadow-1: 0 1px 0 0 rgba(11,18,32,.06), 0 1px 2px rgba(11,18,32,.04);
  --shadow-2: 0 2px 0 -1px rgba(11,18,32,.06), 0 8px 24px -8px rgba(11,18,32,.10);
  --shadow-3: 0 24px 60px -28px rgba(11,18,32,.28);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-precision: cubic-bezier(.2,.7,.2,1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ── Grid ────────────────────────────────────────────────── */
  --gutter:     24px;
  --col-max:   1280px;
  --col-wide:  1440px;
}

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--scs-ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--steel-500);
  font-weight: 500;
}
.eyebrow .tick { color: var(--scs-orange); }

.tick-sq {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--scs-orange);
  vertical-align: 1px;
  margin-right: 8px;
}

.hr-tech {
  border: 0;
  border-top: 1px solid var(--scs-ink);
  height: 0;
  margin: 0;
}
.hr-tech--steel { border-top-color: var(--steel-200); }