/* ============================================================
   110s Design System - LAYER 2: PRIMITIVES
   v2 visual refresh: typography hierarchy as primary design tool.
   ============================================================ */

/* ---- Layout container ---- */
.ds-container{max-width:var(--ds-container);margin:0 auto;padding:0 var(--ds-gutter);}
@media(max-width:768px){.ds-container{padding:0 22px;}}

/* ---- Reading measures ---- */
.ds-measure{max-width:68ch;}
.ds-measure-narrow{max-width:58ch;}

/* ---- Section rhythm ---- */
.ds-section{padding:var(--ds-section-y) 0;position:relative;}
.ds-section--tight{padding:calc(var(--ds-section-y) * 0.6) 0;}

/* ---- Surfaces ---- */
.ds-bg{background:var(--ds-bg);color:var(--ds-ink);}
.ds-surface{background:var(--ds-surface);color:var(--ds-ink);}
.ds-dark{background:var(--ds-navy);color:#fff;}

/* ---- Typography primitives ---- */
.ds-display{font-family:var(--ds-font-display);font-weight:var(--ds-weight-bold);
  font-size:var(--ds-text-display);line-height:var(--ds-leading-tight);letter-spacing:var(--ds-track-tight);margin:0;color:var(--ds-ink);}
.ds-h1{font-family:var(--ds-font-display);font-weight:var(--ds-weight-bold);
  font-size:var(--ds-text-3xl);line-height:var(--ds-leading-tight);letter-spacing:var(--ds-track-tight);margin:0;color:var(--ds-ink);}
.ds-h2{font-family:var(--ds-font-display);font-weight:var(--ds-weight-semibold);
  font-size:var(--ds-text-2xl);line-height:1.06;letter-spacing:var(--ds-track-snug);margin:0;color:var(--ds-ink);}
.ds-h3{font-family:var(--ds-font-display);font-weight:var(--ds-weight-semibold);
  font-size:var(--ds-text-xl);line-height:var(--ds-leading-snug);letter-spacing:var(--ds-track-snug);margin:0;color:var(--ds-ink);}
.ds-lead{font-size:var(--ds-text-lg);color:var(--ds-muted);font-weight:var(--ds-weight-regular);
  line-height:1.55;max-width:54ch;margin:0;}
.ds-body{font-size:var(--ds-text-base);color:var(--ds-ink);line-height:var(--ds-leading-body);}
.ds-muted{color:var(--ds-muted);}
.ds-on-dark{color:#fff;}
.ds-on-dark-muted{color:var(--ds-muted-dark);}

/* ---- Accent text (solid; gradient retired per Option D) ---- */
.ds-grad{color:var(--ds-accent);}
.ds-accent-word{color:var(--ds-accent);}

/* ---- Eyebrow / section index (recurring structural device, quieter) ---- */
.ds-eyebrow{font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);font-weight:500;
  letter-spacing:var(--ds-track-label);text-transform:uppercase;color:var(--ds-muted);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;}
.ds-eyebrow::before{content:"";width:24px;height:1px;background:var(--ds-accent);display:inline-block;}
.ds-eyebrow.is-light{color:var(--ds-muted-dark);}

/* ---- Mono label / data ---- */
.ds-label{font-family:var(--ds-font-mono);font-size:var(--ds-text-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ds-muted);}

/* ---- Hairline divider ---- */
.ds-rule{border:0;border-top:1px solid var(--ds-line);margin:0;}
.ds-rule.is-dark{border-top-color:var(--ds-line-dark);}

/* ---- Accessibility: focus + reduced motion (global, safe) ---- */
.ds-focusable:focus-visible{outline:2px solid var(--ds-accent);outline-offset:3px;border-radius:3px;}
*:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){
  .ds-anim{animation:none!important;transition:none!important;}
}