/* ============================================================
   Morphability Design System — Foundations
   Colors + Type tokens
   Source of truth: MOR Brand Guidelines 2026 (Aestoria Design Co.)
   ============================================================ */

/* Fonts ------------------------------------------------------ */
/* Brand fonts now loaded from licensed files in /fonts:
   - DIN Alternate Bold for display headings
   - Myriad Pro family for body & UI (Light, Regular, Cond, Bold,
     Bold Cond, Bold Cond Italic, Bold Italic, Semibold Italic)
   Originally the spec read "DIN" for headings and "Arial" for body;
   the supplied Myriad Pro replaces Arial as the primary body face
   (it's a humanist sans, very close to Adobe's house body face). */

@font-face {
  font-family: "DIN Alternate";
  src: url("fonts/DINAlternate-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("fonts/MyriadPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("fonts/MYRIADPRO-REGULAR.OTF") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("fonts/MYRIADPRO-SEMIBOLDIT.OTF") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("fonts/MYRIADPRO-BOLD.OTF") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("fonts/MYRIADPRO-BOLDIT.OTF") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Condensed cut, exposed as a separate family for headlines */
@font-face {
  font-family: "Myriad Pro Cond";
  src: url("fonts/MYRIADPRO-COND.OTF") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro Cond";
  src: url("fonts/MYRIADPRO-CONDIT.OTF") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro Cond";
  src: url("fonts/MYRIADPRO-BOLDCOND.OTF") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro Cond";
  src: url("fonts/MYRIADPRO-BOLDCONDIT.OTF") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS (per page 8 of guidelines) ---------- */

  /* Primary — Blue: Consulting / Growth as a Service */
  --mor-blue:        #0C3251;
  --mor-blue-rgb:    12, 50, 81; /* @kind color */

  /* Primary — Purple: Hot Leads */
  --mor-purple:      #373170;
  --mor-purple-rgb:  55, 49, 112; /* @kind color */

  /* Primary — Teal / Aqua: Sales Admin as a Service.
     Aqua is the universal accent — pairs with everything. */
  --mor-teal:        #009EAB;
  --mor-teal-rgb:    0, 158, 171; /* @kind color */

  /* Primary — Pink: Sales Accelerator Program */
  --mor-pink:        #B63F7C;
  --mor-pink-rgb:    182, 63, 124; /* @kind color */

  /* Secondary — Dark Navy: deep grounded surfaces (not black) */
  --mor-navy:        #131827;
  --mor-navy-rgb:    19, 24, 39; /* @kind color */

  /* Neutrals — derived for UI surfaces, dividers, etc.
     Tuned to harmonise with the navy/teal palette rather than
     pure greys. */
  --mor-white:       #FFFFFF;
  --mor-paper:       #F6F8FA;   /* off-white page bg */
  --mor-mist:        #E6ECF1;   /* subtle dividers / chip bg */
  --mor-fog:         #C9D2DB;   /* borders */
  --mor-stone:       #8A95A3;   /* muted text */
  --mor-graphite:    #4A5564;   /* secondary text */
  --mor-ink:         #131827;   /* === navy, primary text */
  --mor-black:       #000000;

  /* ---------- SEMANTIC SURFACES & FOREGROUNDS ---------- */
  --bg:              var(--mor-paper);
  --bg-elevated:     var(--mor-white);
  --bg-inverse:      var(--mor-blue);
  --bg-deep:         var(--mor-navy);

  --fg-1:            var(--mor-ink);          /* primary text */
  --fg-2:            var(--mor-graphite);     /* secondary text */
  --fg-3:            var(--mor-stone);        /* tertiary / placeholder */
  --fg-on-dark:      var(--mor-white);
  --fg-on-dark-2:    rgba(255,255,255,0.72);
  --fg-on-dark-3:    rgba(255,255,255,0.48);

  --border:          var(--mor-fog);
  --border-strong:   var(--mor-graphite);
  --divider:         var(--mor-mist);

  --accent:          var(--mor-teal);          /* default action accent */
  --accent-fg:       var(--mor-white);

  /* ---------- BRAND GRADIENT ---------- */
  /* Pink -> Purple -> Blue -> Teal (per guideline page 8) */
  --mor-gradient: linear-gradient(
    115deg,
    #B63F7C 0%,
    #373170 38%,
    #0C3251 70%,
    #009EAB 100%
  ); /* @kind color */
  --mor-gradient-soft: linear-gradient(
    115deg,
    rgba(182, 63, 124, 0.16) 0%,
    rgba(55, 49, 112, 0.16) 38%,
    rgba(12, 50, 81, 0.16) 70%,
    rgba(0, 158, 171, 0.16) 100%
  ); /* @kind color */

  /* ---------- SERVICE LINE ACCENTS ---------- */
  /* Each service has its own dominant brand colour */
  --service-growth:      var(--mor-blue);     /* Growth as a Service */
  --service-hotleads:    var(--mor-purple);   /* Hot Leads */
  --service-salesadmin:  var(--mor-teal);     /* Sales Admin as a Service */
  --service-accelerator: var(--mor-pink);     /* Sales Accelerator Program */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "DIN Alternate", "DIN", "Myriad Pro Cond",
                  "Arial Narrow", sans-serif;
  --font-condensed: "Myriad Pro Cond", "DIN Alternate",
                  "Arial Narrow", sans-serif;
  --font-body:    "Myriad Pro", "Helvetica Neue", Helvetica, Arial,
                  system-ui, sans-serif;
  --font-ui:      "Myriad Pro", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ----------
     Display family runs uppercase + condensed for hero / section heads.
     Body family runs sentence case for prose. */
  --fs-hero:     clamp(48px, 7.5vw, 96px); /* @kind font */
  --fs-h1:       clamp(40px, 5.5vw, 64px); /* @kind font */
  --fs-h2:       clamp(30px, 4vw, 44px); /* @kind font */
  --fs-h3:       28px; /* @kind font */
  --fs-h4:       22px; /* @kind font */
  /* uppercase tracked label above headings */
  --fs-eyebrow:  13px; /* @kind font */
  --fs-lead:     20px; /* @kind font */
  --fs-body:     16px; /* @kind font */
  --fs-sm:       14px; /* @kind font */
  --fs-xs:       12px; /* @kind font */

  --lh-display:  1.02; /* @kind font */
  --lh-heading:  1.12; /* @kind font */
  --lh-body:     1.55; /* @kind font */
  --lh-tight:    1.25; /* @kind font */

  /* ---------- BODY WEIGHTS ----------
     House default for running body copy is Myriad Pro Light (300) —
     it reads beautifully in spacious, editorial layouts.
     Small / dense / UI text steps up to Regular (400) so it stays
     legible at small sizes (Light gets fragile below ~14px). */
  --fw-body:   300; /* @kind font */
  --fw-body-2: 400; /* @kind font */

  --tracking-display: -0.005em; /* @kind font */
  --tracking-eyebrow: 0.18em; /* @kind font */
  --tracking-button:  0.06em; /* @kind font */

  /* ---------- SPACING SCALE ---------- */
  --space-0:  0;
  --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:  96px;
  --space-10: 128px;

  /* ---------- RADII ----------
     Brand uses geometric, contemporary UI shapes (per p27 sample doc).
     Cards lean toward gently-rounded; buttons are pill or pill-adjacent. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ----------
     Soft, low-contrast — the brand favours flat, minimalistic surfaces
     with most depth coming from colour blocks rather than shadow. */
  --shadow-xs: 0 1px 2px rgba(19, 24, 39, 0.06);
  --shadow-sm: 0 2px 8px rgba(19, 24, 39, 0.06),
               0 1px 2px rgba(19, 24, 39, 0.04);
  --shadow-md: 0 8px 24px rgba(19, 24, 39, 0.08),
               0 2px 6px rgba(19, 24, 39, 0.04);
  --shadow-lg: 0 24px 60px rgba(12, 50, 81, 0.18),
               0 6px 16px rgba(12, 50, 81, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 158, 171, 0.32);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-max:  1200px; /* @kind spacing */
  --container-pad:  clamp(20px, 4vw, 48px); /* @kind spacing */
  --section-pad-y:  clamp(56px, 9vw, 128px); /* @kind spacing */
}

/* ============================================================
   BASE / SEMANTIC ELEMENTS
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display headings — DIN-style: condensed, uppercase, weighty. */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.hero, .display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h1, .h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  font-weight: 700;
}

h2, .h2 {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  font-weight: 700;
  line-height: var(--lh-heading);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: 600;
  /* h3 stays mixed-case so it reads like a sub-section, not a banner */
  text-transform: none;
  letter-spacing: 0;
}

h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mor-teal);
  display: inline-block;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}

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

a {
  color: var(--mor-teal);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--mor-purple); }

small, .small { font-size: var(--fs-sm); font-weight: var(--fw-body-2); color: var(--fg-2); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: rgba(0, 158, 171, 0.28); color: var(--mor-ink); }

/* Utility — tagline style block (e.g. "Serious results, Light-hearted approach") */
.tagline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.01em;
}