/* ============================================================
   ASSH Design System — Colors & Type
   Source: Celerate / ASSH Website Branding Guidelines, June 2025
   ============================================================ */

/* Fonts — Manrope (headings/UI), Inter (body)
   Both self-hosted from local variable TTFs. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand Colors ---------- */
  /* Primary Gray */
  --assh-gray:            #313337;  /* Body text */
  --assh-black:           #000000;  /* Titles & headings, link hover */
  --assh-gray-a:          #9FA8AF;  /* Framing, dark borders */
  --assh-gray-b:          #D6DBE0;  /* Framing, borders */
  --assh-gray-c:          #EFF2F5;  /* Framing */

  /* Blue — primary dark background */
  --assh-blue:            #2E5774;
  --assh-blue-dark:       #1F3B55;  /* Secondary dark bg */
  --assh-blue-a:          #82A9C5;
  --assh-blue-b:          #ADC7D8;
  --assh-blue-c:          #E8F1F6;

  /* Green — highlight */
  --assh-green:           #839A43;
  --assh-green-dark:      #6C7B43;  /* Button hover */
  --assh-green-a:         #B9C0A4;
  --assh-green-b:         #D4DAC4;
  --assh-green-c:         #F4F4EB;  /* Soft surface, alt background */

  /* Teal — link color, highlight */
  --assh-teal:            #008E84;
  --assh-teal-dark:       #005963;  /* Button hover */
  --assh-teal-a:          #7EBAB6;
  --assh-teal-b:          #B8D8D5;
  --assh-teal-c:          #E8F3F2;

  /* ---------- UI / Function Indicators ---------- */
  --assh-ui-purple:       #7E35F4;  /* Function indicator */
  --assh-ui-purple-dark:  #3E00A3;
  --assh-ui-purple-light: #E4D4FF;

  --assh-ui-pink:         #CD3A83;  /* Important indicator */
  --assh-ui-pink-dark:    #9C0E55;
  --assh-ui-pink-light:   #F4DDE8;

  --assh-ui-red:          #DA4352;  /* Error */
  --assh-ui-red-dark:     #91000E;
  --assh-ui-red-light:    #FFDEDE;

  --assh-ui-yellow:       #FFC107;  /* Warning */
  --assh-ui-yellow-dark:  #B75A0D;
  --assh-ui-yellow-light: #FFEDB5;

  --assh-ui-green:        #71C75F;  /* Success */
  --assh-ui-green-dark:   #347627;
  --assh-ui-green-light:  #DBF3D7;

  --assh-ui-cyan:         #0DCAF0;  /* Info */
  --assh-ui-cyan-dark:    #007891;
  --assh-ui-cyan-light:   #D9F8FF;

  /* ---------- Semantic roles ---------- */
  --bg:                   #FFFFFF;
  --bg-alt:               #F4F4EB;   /* Warm cream — used for sections, side panels */
  --bg-dark:              #2E5774;   /* Navy — dark sections, footer band */
  --bg-dark-2:            #1F3B55;   /* Deeper navy, mega-menu hovers */

  --fg:                   #313337;
  --fg-strong:            #000000;
  --fg-muted:             #9FA8AF;
  --fg-on-dark:           #FFFFFF;

  --border:               #D6DBE0;
  --border-soft:          #EFF2F5;
  --border-green:         #D4DAC4;   /* Warm border on cream panels */
  --border-green-strong:  #B9C0A4;

  --link:                 #008E84;   /* Teal */
  --link-hover:           #005963;

  --accent:               #839A43;   /* Green highlight */
  --accent-alt:           #008E84;   /* Teal highlight */

  /* ---------- Type scale ---------- */
  --font-heading:  "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* XL breakpoint (>=1200) — design canonical */
  --text-h1:       52px;  --text-h1-lh: 56px;  /* Manrope Medium 500 */
  --text-h2:       40px;  --text-h2-lh: 44px;  /* Manrope Medium 500 */
  --text-h3:       36px;  --text-h3-lh: 40px;
  --text-h4:       32px;  --text-h4-lh: 36px;
  --text-h5:       28px;  --text-h5-lh: 32px;  /* Manrope SemiBold 700 */
  --text-h6:       24px;  --text-h6-lh: 28px;

  --text-body-lg:  22px;  --text-body-lg-lh: 32px;
  --text-body:     18px;  --text-body-lh: 28px;   /* Inter Regular 400 */
  --text-body-sm:  16px;  --text-body-sm-lh: 24px;
  --text-caption:  13px;  --text-caption-lh: 18px;
  --text-micro:    12px;  --text-micro-lh: 15px;

  /* Navigation link sizes */
  --text-nav-1:    16px;  /* Manrope 700 — primary nav */
  --text-nav-2:    14px;  /* Manrope 700 — secondary / utility nav */
  --text-nav-3:    13px;
  --text-nav-4:    12px;

  /* ---------- Spacing / radius / shadows ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;   /* icon→text, pretitle→title */
  --space-4: 15px;
  --space-5: 20px;   /* heading bottom margin, card padding */
  --space-6: 30px;
  --space-7: 40px;   /* heading top margin */
  --space-8: 50px;
  --space-9: 70px;
  --space-10: 100px;

  --radius-xs: 4px;   /* buttons (default) */
  --radius-sm: 5px;   /* cards, callouts */
  --radius-md: 8px;
  --radius-lg: 10px;  /* icon chips */
  --radius-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.06);
  --shadow-md:  0 4px 4px rgba(0,0,0,.15);   /* card — from cover frame */
  --shadow-lg:  0 8px 24px rgba(12,35,54,.20);

  /* ---------- Motion ---------- */
  --ease-std: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-lh);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-h1);
  line-height: var(--text-h1-lh);
  color: var(--fg-strong);
  margin: var(--space-7) 0 var(--space-5);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h5); /* 28px — design system uses "Heading Two" at 28/32 bold */
  line-height: var(--text-h5-lh);
  color: var(--fg-strong);
  margin: var(--space-7) 0 var(--space-5);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h6);
  line-height: var(--text-h6-lh);
  color: var(--fg-strong);
  margin: var(--space-7) 0 var(--space-5);
}
h4, .h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: var(--fg-strong);
}

.pretitle, .eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body-sm);
  line-height: 20px;
  color: var(--fg-strong);
  text-transform: none;
}
.subtitle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body-sm);
  line-height: 20px;
  color: var(--fg-strong);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--fg);
}
.body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-lh);
}

a, .link {
  color: var(--link);
  text-decoration: none;
  font-weight: 700;
  transition: color var(--dur-fast) var(--ease-std);
}
a:hover, .link:hover { color: var(--link-hover); }

.caption {
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--fg);
}

/* Buttons — default, primary (teal), highlight (green), dark variants */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-body-sm);
  line-height: 20px;
  color: #FFFFFF;
  background: var(--assh-blue);
  border: 0;
  border-radius: var(--radius-xs);
  padding: 13px 20px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.btn:hover { background: var(--assh-blue-dark); color: #FFFFFF; }

.btn--primary { background: var(--assh-teal); }
.btn--primary:hover { background: var(--assh-teal-dark); }

.btn--highlight { background: var(--assh-green); }
.btn--highlight:hover { background: var(--assh-green-dark); }

.btn--outline {
  background: transparent;
  color: var(--assh-blue);
  border: 1px solid var(--assh-blue);
}
.btn--outline:hover { background: var(--assh-blue); color: #FFFFFF; }

.btn--sm { padding: 8px 15px; font-size: 14px; }
.btn--lg { padding: 16px 24px; font-size: 18px; }

/* Cards */
.card {
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card--cream {
  background: var(--bg-alt);
  border: 1px solid var(--border-green);
}

/* Tag / badge */
.tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  padding: 6px 10px;
  background: var(--assh-green-c);
  color: var(--assh-green-dark);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tag--teal   { background: var(--assh-teal-c);  color: var(--assh-teal-dark); }
.tag--blue   { background: var(--assh-blue-c);  color: var(--assh-blue-dark); }
.tag--gray   { background: var(--assh-gray-c);  color: var(--assh-gray); }