/* ============================================================
   MOMENTIC DESIGN SYSTEM — colors_and_type.css
   Single source of truth for color + type tokens.
   Variable names mirror the live momenticmarketing.com tokens
   wherever possible. Aliases preserve the legacy naming so
   pasted code from the production site still resolves.
   ============================================================ */

/* ---------- WEB FONTS ---------- */
@font-face {
  font-family: "Urbanist";
  src: url("fonts/Urbanist-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("fonts/Urbanist-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter Variable";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Variable";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — PRIMARY BRAND
     ============================================================ */
  --momentic--primary--momentic-orange: #FF2417;
  --momentic--primary--accent:          #FF4F18;  /* hover / accent */
  --momentic--primary--muted-orange:    #ff241780;

  /* aliases preserved from production tokens */
  --split-comp--main:  var(--momentic--primary--momentic-orange);
  --analogous--main:   var(--momentic--primary--momentic-orange);
  --triadic--main:     var(--momentic--primary--momentic-orange);
  --accent:            var(--momentic--primary--accent);

  /* ============================================================
     COLOR — WARM NEUTRALS (9-step ramp, olive undertone)
     ============================================================ */
  --momentic--neutrals--warm-gray-50:  #F9FAF3;
  --momentic--neutrals--warm-gray-100: #F4F5EE;  /* warm white / page bg */
  --momentic--neutrals--warm-gray200:  #ECEEE6;  /* cream — typo in source kept */
  --momentic--neutrals--warm-gray-300: #DEDFD8;
  --momentic--neutrals--warm-gray-400: #BBBCB5;
  --momentic--neutrals--warm-gray-500: #9B9D96;
  --momentic--neutrals--warm-gray-600: #73746E;
  --momentic--neutrals--warm-gray-700: #5F605A;
  --momentic--neutrals--warm-gray-800: #40413B;
  --momentic--neutrals--warm-gray-900: #1F201B;  /* warm black */

  --momentic--primary--warm-white:    var(--momentic--neutrals--warm-gray-100);
  --momentic--primary--warm-blck:     var(--momentic--neutrals--warm-gray-900);  /* sic */
  --momentic--primary--gray-10:       var(--momentic--neutrals--warm-gray-100);
  --momentic--primary--gray-20:       var(--momentic--neutrals--warm-gray200);
  --momentic--backgrounds--bg-light:  var(--momentic--neutrals--warm-gray-100);
  --momentic--backgrounds--bg-dark:   var(--momentic--neutrals--warm-gray-900);
  --analogous--rise:                  var(--momentic--neutrals--warm-gray200);
  --momentic--neutrals--tan:          var(--momentic--neutrals--warm-gray200);
  --legacy--white:                    var(--momentic--neutrals--warm-gray-100);

  /* ink + deep darks */
  --ink:           #141517;
  --legacy--black: #141517;
  --momentic--natural--crust: #332F2D;
  --paper:         #F7F4EE;

  /* ============================================================
     COLOR — YELLOW / LIME
     ============================================================ */
  --momentic--primary--yellow:        #E2F57A;
  --momentic--primary--muted-yellow:  #E2F57A80;
  --split-comp--yellow-alt:           var(--momentic--primary--yellow);
  --split-comp--yellow:               var(--momentic--primary--muted-yellow);
  --analogous--sun:                   var(--momentic--primary--muted-yellow);

  /* ============================================================
     COLOR — GREEN
     ============================================================ */
  --momentic--primary--alien:       #7AF58C;
  --momentic--green--neon:          #88FF17;
  --momentic--green--alien-5:       #F2FFE5;
  --momentic--green--alien-10:      #DDFFBF;
  --momentic--primary--muted-neon:  #7AF58C80;
  --momentic--green--alien-70:      #00C000;
  --momentic--green--alien-90:      #005B00;
  --momentic--primary--dk-green:    #405548;
  --momentic--primary--muted-green: #40554880;
  --momentic--neutrals--muted-green:#D9DED7;
  --momentic--neutrals--muted-green-50: #D9DED780;

  --split-comp--green:              var(--momentic--primary--alien);
  --momentic--green--alien:         var(--momentic--primary--alien);
  --momentic--neutrals--green:      var(--momentic--primary--dk-green);
  --momentic--backgrounds--bg-dark-alt:  var(--momentic--primary--dk-green);
  --momentic--backgrounds--bg-light-alt: var(--momentic--neutrals--muted-green);

  /* ============================================================
     COLOR — RED (coral family — DISTINCT from Momentic Orange)
     ============================================================ */
  --momentic--primary--red:        #FF736C;  /* coral */
  --momentic--primary--lt-red:     #D9D1D4;  /* mauve */
  --momentic--primary--dk-red:     #55404D;  /* plum */
  --momentic--primary--muted-red:  #55404D80;
  --momentic--backgrounds--bg-dark-alt-3: var(--momentic--primary--dk-red);

  /* ============================================================
     COLOR — BLUE / SLATE
     ============================================================ */
  --momentic--primary--dk-blue:    #404D55;
  --momentic--primary--muted-blue: #404D5580;
  --momentic--blues--blue:         #1744FF;
  --momentic--blues--slate-80:     #292F45;
  --triadic--water:                var(--momentic--primary--dk-blue);
  --momentic--backgrounds--bg-dark-alt-2: var(--momentic--primary--dk-blue);

  /* ============================================================
     COLOR — PURPLE
     ============================================================ */
  --momentic--neutrals--muted-purple:    #DAD7DE;
  --momentic--neutrals--muted-purple-50: #DAD7DE80;

  /* ============================================================
     COLOR — NATURAL / EARTH
     ============================================================ */
  --momentic--natural--earth:  #C5B6AD;
  --momentic--natural--clay:   #6D6560;

  /* ============================================================
     COLOR — UTILITY / COMBO
     ============================================================ */
  --momentic--neutrals--muted-combo:   #D9DBD3;
  --momentic--neutrals--muted-tan-50:  #ECEDE780;

  /* ============================================================
     SEMANTIC COLOR ROLES
     Use these in new component code. The raw tokens above are
     for reference / migration; semantic vars are the contract.
     ============================================================ */
  --bg:              var(--momentic--neutrals--warm-gray-100); /* page */
  --bg-cream:        var(--momentic--neutrals--warm-gray200);  /* lifted */
  --bg-off:          var(--momentic--neutrals--warm-gray-50);
  --bg-dark:         var(--momentic--neutrals--warm-gray-900);
  --bg-dark-green:   var(--momentic--primary--dk-green);
  --bg-dark-blue:    var(--momentic--primary--dk-blue);
  --bg-dark-red:     var(--momentic--primary--dk-red);
  --bg-crust:        var(--momentic--natural--crust);

  --fg:              var(--momentic--neutrals--warm-gray-900);
  --fg-muted:        var(--momentic--neutrals--warm-gray-700);
  --fg-subtle:       var(--momentic--neutrals--warm-gray-500);
  --fg-on-dark:      var(--momentic--neutrals--warm-gray-100);
  --fg-on-dark-muted:var(--momentic--neutrals--warm-gray-400);

  --brand:           var(--momentic--primary--momentic-orange);
  --brand-hover:     var(--momentic--primary--accent);

  --border:          var(--momentic--neutrals--warm-gray-300);
  --border-strong:   var(--momentic--neutrals--warm-gray-900);
  --border-on-dark:  rgba(244, 245, 238, 0.6);

  /* ============================================================
     TYPOGRAPHY — FONT ROLES
     ============================================================ */
  --display:          "Bowlby One", Verdana, sans-serif;          /* reserved, heavy display */
  --primary-heading:  "Urbanist", Arial, sans-serif;              /* actual heading font */
  --primary:          "Inter Variable", "Inter", Arial, sans-serif;
  --subheading:       "Inter Variable", "Inter", Arial, sans-serif;
  --mono:             "IBM Plex Mono", ui-monospace, monospace;
  --utility:          "Open Sans", "Inter Variable", Arial, sans-serif; /* nav + button labels */

  /* ============================================================
     TYPOGRAPHY — SCALE (Urbanist headings)
     ============================================================ */
  --font--heading--h1: 3.125rem; /* 50px base — hero often overrides to 64px */
  --font--heading--h2: 2.25rem;  /* 36px */
  --font--heading--h3: 1.75rem;  /* 28px */
  --font--heading--h4: 1.375rem; /* 22px */
  --font--heading--h5: 1.125rem; /* 18px */
  --font--heading--h6: 1rem;     /* 16px */

  /* Body / utility scale */
  --font--text--xs:  0.75rem;  /* 12px */
  --font--text--s:   0.875rem; /* 14px */
  --font--text--r:   1rem;     /* 16px */
  --font--text--l:   2.25rem;  /* 36px */
  --font--text--xl:  3.375rem; /* 54px */

  /* tracking — Urbanist runs tight, Inter runs slightly open */
  --tracking--display:  -0.044em;  /* hero H1 */
  --tracking--heading:  -0.02em;   /* H2-H6 */
  --tracking--body:     0.025em;   /* ~0.4px at 16px */

  /* line-heights */
  --lh--display: 1;     /* hero */
  --lh--heading: 1.3;
  --lh--body:    1.6;

  /* ============================================================
     LAYOUT TOKENS
     ============================================================ */
  --grid-spacing: 80px;
  --grid-line-color: rgba(244, 245, 238, 0.6);
  --grid-line-width: 1px;

  /* spacing scale used across the system */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;

  /* radii — the live site runs near-square. 4px is the cap for surfaces.
     Pills stay 999. Anything heavier than 4 is a deliberate exception. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-pill: 999px;

  /* shadows — restrained. The brand reads as flat with hairline borders. */
  --shadow-soft: 0 1px 0 rgba(31, 32, 27, 0.04), 0 6px 18px rgba(31, 32, 27, 0.06);
  --shadow-lift: 0 1px 0 rgba(31, 32, 27, 0.06), 0 14px 36px rgba(31, 32, 27, 0.10);
  --shadow-focus: 0 0 0 3px rgba(255, 36, 23, 0.28);

  /* motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Drop colors_and_type.css onto a page and you get the
   Momentic baseline without writing further CSS.
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--primary);
  font-size: 16px;
  line-height: var(--lh--body);
  letter-spacing: var(--tracking--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--primary-heading);
  font-weight: 900;
  color: var(--fg);
  margin: 0 0 0.4em;
  line-height: var(--lh--heading);
  letter-spacing: var(--tracking--heading);
  text-wrap: balance;
}
h1 { font-size: var(--font--heading--h1); letter-spacing: var(--tracking--display); line-height: var(--lh--display); }
h2 { font-size: var(--font--heading--h2); }
h3 { font-size: var(--font--heading--h3); }
h4 { font-size: var(--font--heading--h4); }
h5 { font-size: var(--font--heading--h5); }
h6 { font-size: var(--font--heading--h6); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--brand); }

code, kbd, pre, samp {
  font-family: var(--mono);
  font-size: 0.9em;
}

::selection { background: var(--brand); color: var(--fg-on-dark); }

/* ============================================================
   UTILITY CLASSES — short and composable
   ============================================================ */
.mono       { font-family: var(--mono); letter-spacing: 0; text-transform: uppercase; font-size: var(--font--text--xs); }
.eyebrow    { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--font--text--xs); color: var(--fg-muted); }
.display    { font-family: var(--primary-heading); font-weight: 900; letter-spacing: var(--tracking--display); line-height: 1; font-size: 64px; }