/* ============================================
   MD7 Design System — Colors & Typography
   ============================================ */

/* Ambit — official MD7 primary typeface (HvD Fonts).
   Files live in /fonts (relative to this stylesheet). */
@font-face {
  font-family: 'Ambit';
  src: url('fonts/ambit-regular.woff2') format('woff2'),
       url('fonts/ambit-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/ambit-italic.woff2') format('woff2'),
       url('fonts/ambit-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/ambit-semibold.woff2') format('woff2'),
       url('fonts/ambit-semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/ambit-semibolditalic.woff2') format('woff2'),
       url('fonts/ambit-semibolditalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/ambit-bold.woff2') format('woff2'),
       url('fonts/ambit-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ambit';
  src: url('fonts/ambit-bolditalic.woff2') format('woff2'),
       url('fonts/ambit-bolditalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* ==========================================
     COLORS — Brand
     MD7 Orange is the singular brand color,
     paired with deep neutrals and clean white.
     ========================================== */

  /* Primary brand — CANONICAL (2020 Style Guide) */
  --md7-orange:        #FF6720;   /* PMS 165  / CMYK 0-68-96-0  / RGB 255-103-32 */
  --md7-orange-600:    #D55A18;   /* hover / pressed (darker) */
  --md7-orange-300:    #FF9357;   /* tints for shapes & illustrations */
  --md7-orange-100:    #FFD9C2;   /* wash backgrounds */
  --md7-orange-050:    #FFF1E8;   /* page wash / soft section */

  /* Secondary brand — CANONICAL (2020 Style Guide) */
  --md7-navy:          #253746;   /* PMS 7546 / CMYK 88-57-27-65 / RGB 37-55-70 */
  --md7-navy-600:      #1A2733;
  --md7-navy-300:      #4A6377;
  --md7-sky:           #C6DAE7;   /* PMS 545  / CMYK 20-3-0-0    / RGB 198-218-231 */
  --md7-sky-600:       #9DBACC;
  --md7-sky-100:       #E8F0F6;

  /* Neutrals — warm-leaning grayscale */
  --md7-black:         #0A0A0A;   /* primary text on light */
  --md7-ink:           #1A1A1A;   /* near-black surfaces */
  --md7-graphite:      #3A3A3A;   /* secondary text */
  --md7-slate:         #6B6B6B;   /* tertiary text / captions */
  --md7-stone:         #9C9C9C;   /* muted UI */
  --md7-fog:           #D6D6D6;   /* hairlines / dividers */
  --md7-mist:          #EDEDED;   /* subtle fills */
  --md7-paper:         #F7F5F2;   /* warm page wash */
  --md7-white:         #FFFFFF;

  /* Semantic */
  --color-fg-1:        var(--md7-black);     /* headlines, primary text */
  --color-fg-2:        var(--md7-graphite);  /* body */
  --color-fg-3:        var(--md7-slate);     /* meta / captions */
  --color-fg-muted:    var(--md7-stone);
  --color-fg-inverse:  var(--md7-white);
  --color-fg-accent:   var(--md7-orange);

  --color-bg-1:        var(--md7-white);     /* default surface */
  --color-bg-2:        var(--md7-paper);     /* alternate section */
  --color-bg-3:        var(--md7-mist);      /* card on alt */
  --color-bg-inverse:  var(--md7-navy);      /* dark sections — OFFICIAL navy */
  --color-bg-ink:      var(--md7-ink);       /* alt dark — website-style */
  --color-bg-accent:   var(--md7-orange);

  --color-border:      var(--md7-fog);
  --color-border-strong: var(--md7-stone);

  --color-success:     #2E7D5B;
  --color-warning:     #C77A1B;
  --color-danger:      #B23A2E;
  --color-info:        #2B5DA0;

  /* ==========================================
     TYPOGRAPHY — CANONICAL (2020 Style Guide)
       Primary: Ambit Regular / SemiBold / Bold
                (HvD Fonts, licensed; bundled in /fonts)
       Office:  Arial Bold / Regular
     ========================================== */
  --font-sans:    'Ambit', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-office:  Arial, 'Helvetica Neue', Helvetica, sans-serif; /* Word/PowerPoint per Style Guide */
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Weights actually used */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Type scale — modular, slightly editorial */
  --fs-display:  clamp(48px, 6.5vw, 96px);   /* hero ("Unlimited possibilities…") */
  --fs-h1:       clamp(36px, 4vw, 56px);
  --fs-h2:       clamp(28px, 2.6vw, 40px);
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-eyebrow:  13px;                       /* uppercased labels */
  --fs-body-lg:  19px;
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-caption:  12px;

  /* Line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  /* Tracking */
  --tr-display:  -0.02em;
  --tr-tight:    -0.01em;
  --tr-normal:   0;
  --tr-eyebrow:  0.14em;     /* generous for uppercased labels */

  /* ==========================================
     SPACING & RADII
     ========================================== */
  --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;

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;
  --radius-blob:  48% 52% 60% 40% / 50% 45% 55% 50%; /* signature organic shape */

  /* ==========================================
     ELEVATION
     Shadows are restrained — MD7 favors flat surfaces
     with subtle elevation on hover only.
     ========================================== */
  --shadow-xs:  0 1px 2px rgba(10,10,10,.06);
  --shadow-sm:  0 2px 8px rgba(10,10,10,.06);
  --shadow-md:  0 6px 20px rgba(10,10,10,.08);
  --shadow-lg:  0 16px 40px rgba(10,10,10,.10);
  --shadow-orange: 0 12px 30px rgba(238,118,35,.22);

  /* ==========================================
     MOTION
     ========================================== */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,0,.2,1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;

  /* Layout */
  --container:   1240px;
  --gutter:      24px;
}

/* ============================================
   SEMANTIC ELEMENT STYLES
   ============================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
  background: var(--color-bg-1);
  font-weight: var(--fw-regular);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  color: var(--color-fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--color-fg-1);
  text-wrap: balance;
}

/* Editorial use: pull-quote, perspectives intro */
.serif {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-accent);
  display: inline-block;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  margin: 0 0 1em;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
}

small, .small { font-size: var(--fs-small); color: var(--color-fg-3); }
.caption { font-size: var(--fs-caption); color: var(--color-fg-3); letter-spacing: 0.02em; }

a {
  color: var(--color-fg-1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-fg-accent); border-bottom-color: currentColor; }

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

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }

::selection { background: var(--md7-orange); color: var(--md7-white); }

/* ============================================
   STYLE GUIDE UTILITIES
   ============================================ */

/* Single-corner radius — Style Guide rule:
   "One corner per rectangle." Pick exactly one. */
.radius-corner-tl { border-radius: var(--radius-xl) 0 0 0; }
.radius-corner-tr { border-radius: 0 var(--radius-xl) 0 0; }
.radius-corner-br { border-radius: 0 0 var(--radius-xl) 0; }
.radius-corner-bl { border-radius: 0 0 0 var(--radius-xl); }

/* Crisp-flatness mode — Style Guide rule:
   "Embrace the crisp flatness of the design."
   Apply to a section/page to strip shadows entirely. */
.crisp-flat,
.crisp-flat * { box-shadow: none !important; }

/* ============================================
   SINGLE-CORNER RADIUS — Style Guide rule
   "One corner per rectangle." Use these utilities
   for canonical brand surfaces (slides, hero
   panels, marketing comps).
   ============================================ */
.radius-corner-tl { border-radius: var(--radius-xl) 0 0 0; }
.radius-corner-tr { border-radius: 0 var(--radius-xl) 0 0; }
.radius-corner-br { border-radius: 0 0 var(--radius-xl) 0; }
.radius-corner-bl { border-radius: 0 0 0 var(--radius-xl); }
.radius-corner-tl-lg { border-radius: 48px 0 0 0; }
.radius-corner-tr-lg { border-radius: 0 48px 0 0; }
.radius-corner-br-lg { border-radius: 0 0 48px 0; }
.radius-corner-bl-lg { border-radius: 0 0 0 48px; }