/* =========================================================
   Migrate Digital — Website Design Tokens
   Source: Migrate Digital Proposal Template (SOHNE Edition)
   Extracted 2026-04-21 · FINALIZED
   ========================================================= */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Söhne';
  src: url('../assets/Fonts/Sohne/Sohne%20400.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('../assets/Fonts/Sohne/Sohne%20400%20Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('../assets/Fonts/Sohne/Sohne%20500.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('../assets/Fonts/Sohne/Sohne%20500%20Italic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('../assets/Fonts/Sohne/Sohne%20600.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Söhne';
  src: url('../assets/Fonts/Sohne/Sohne%20600%20Italic.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/Fonts/Inter/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Palette: Ink (on light) */
  --ink:        #1a1a1a;
  --ink-2:      rgba(26, 26, 26, 0.72);
  --ink-3:      rgba(26, 26, 26, 0.52);
  --ink-4:      rgba(26, 26, 26, 0.28);
  --hairline:   rgba(26, 26, 26, 0.10);
  --hairline-2: rgba(26, 26, 26, 0.18);

  /* Palette: Dark (on dark) */
  --dark:       #150c0c;
  --dark-2:     rgba(250, 246, 241, 0.78);
  --dark-3:     rgba(250, 246, 241, 0.52);
  --dark-4:     rgba(250, 246, 241, 0.18);

  /* Palette: Surfaces */
  --cream:      #faf6f1;
  --surface:    #ffffff;
  --page-bg:    #fbf8f4;

  /* Palette: Brand accent */
  --bronze:     #b0723e;
  --bronze-hi:  #d39858;
  --gradient:   linear-gradient(180deg, #d39858, #b0723e);

  /* Typography families */
  --title: 'Söhne', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --body:  'Geist', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale (web px) — deck × 1.25. Gaps at 12/15/18/22 are INTENTIONAL.
     Deck → Web: 8→10, 9→11, 10→13, 11→14, 13→16, 16→20, 20→25, 28→36, 72→92 */
  --t-1: 10px;
  --t-2: 11px;
  --t-3: 13px;
  --t-4: 14px;
  --t-5: 16px;
  --t-6: 20px;
  --t-7: 25px;
  --t-8: 36px;
  --t-display: 92px;

  /* Letterspacing presets */
  --track-ui-xs:   0.28em;
  --track-ui-s:    0.24em;
  --track-ui-m:    0.22em;
  --track-ui-l:    0.12em;
  --track-ui-xl:   0.04em;
  --track-display:         -0.005em;
  --track-display-tight:   -0.01em;
  --track-display-tighter: -0.015em;
  --track-display-tightest:-0.02em;

  /* Line heights */
  --lh-display: 1.12;
  --lh-tagline: 1.3;
  --lh-body:    1.55;
  --lh-body-lg: 1.6;
  --lh-letter:  1.7;

  /* Geometry */
  --r: 0px;
  --rule: 1px;

  /* Spacing rhythm (px) */
  --sp-1:  4px;   --sp-2:  6px;   --sp-3:  8px;   --sp-4:  10px;
  --sp-5:  12px;  --sp-6:  14px;  --sp-7:  16px;  --sp-8:  18px;
  --sp-9:  20px;  --sp-10: 24px;  --sp-11: 30px;  --sp-12: 40px;
  --sp-13: 48px;  --sp-14: 64px;  --sp-15: 80px;

  /* Layout */
  --container-max: 1440px;
  --container-pad: 48px;
  --section-pad-y: 64px;
}

/* ---------- Global defaults ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: var(--body);
  font-size: var(--t-4);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { min-height: 100vh; }

.num, [data-num], .kpi-num, .ph-meta, .sh-num, .rows .row .n, .pf-r {
  font-variant-numeric: tabular-nums;
}

.accent { color: var(--bronze); }
.on-dark .accent, [data-variant="dark"] .accent { color: var(--bronze-hi); }

/* ---------- Container ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left:  var(--container-pad);
  padding-right: var(--container-pad);
}

.section {
  width: 100%;
  padding-top:    var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* ---------- Type presets ---------- */

.t-eyebrow {
  font-family: var(--title); font-weight: 600;
  font-size: var(--t-1); letter-spacing: var(--track-ui-xs);
  text-transform: uppercase; color: var(--bronze);
}
.t-tag {
  font-family: var(--title); font-weight: 600;
  font-size: var(--t-1); letter-spacing: var(--track-ui-s);
  text-transform: uppercase; color: var(--bronze);
}
.t-meta {
  font-family: var(--title); font-weight: 600;
  font-size: var(--t-1); letter-spacing: var(--track-ui-m);
  text-transform: uppercase; color: var(--ink-3);
}
.t-panel-title {
  font-family: var(--title); font-weight: 600;
  font-size: var(--t-3); letter-spacing: var(--track-ui-xl);
  text-transform: uppercase; color: var(--ink);
}
.t-section-num {
  font-family: var(--title); font-weight: 600;
  font-size: var(--t-4); letter-spacing: var(--track-ui-m);
  text-transform: uppercase; color: var(--bronze);
  font-variant-numeric: tabular-nums;
}
.t-headline {
  font-family: var(--title); font-weight: 600;
  font-size: var(--t-7); letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--ink);
  line-height: var(--lh-display);
}
.t-lede {
  font-family: var(--body); font-weight: 400;
  font-size: var(--t-4); line-height: var(--lh-body-lg);
  color: var(--ink-2);
}
.t-body {
  font-family: var(--body); font-weight: 400;
  font-size: var(--t-4); line-height: var(--lh-body);
  color: var(--ink);
}
.t-wordmark {
  font-family: var(--title); font-weight: 600;
  font-size: var(--t-display); letter-spacing: var(--track-display-tighter);
  line-height: 0.95; text-transform: uppercase; color: var(--cream);
}

/* ---------- Dark-variant scope ---------- */

.on-dark, [data-variant="dark"] {
  background: var(--dark);
  color: var(--cream);
}

.on-dark .t-eyebrow,     [data-variant="dark"] .t-eyebrow,
.on-dark .t-tag,         [data-variant="dark"] .t-tag,
.on-dark .t-section-num, [data-variant="dark"] .t-section-num { color: var(--bronze-hi); }

.on-dark .t-meta,        [data-variant="dark"] .t-meta        { color: var(--dark-3); }

.on-dark .t-panel-title, [data-variant="dark"] .t-panel-title,
.on-dark .t-headline,    [data-variant="dark"] .t-headline    { color: var(--cream); }

.on-dark .t-lede,        [data-variant="dark"] .t-lede        { color: var(--dark-2); }
.on-dark .t-body,        [data-variant="dark"] .t-body        { color: var(--cream); }