/* ============================================================
   HVN GROUP — Design Tokens
   Colors + Typography foundations
   Font: Google Sans (official brand typeface — variable, self-hosted)
   ============================================================ */

@font-face {
  font-family: 'Google Sans';
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GoogleSans-VariableFont_GRAD_opsz_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Google Sans';
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  src: url('fonts/GoogleSans-Italic-VariableFont_GRAD_opsz_wght.ttf') format('truetype-variations');
}

:root {
  /* ---------- BRAND / PRIMARY ---------- */
  --hvn-red:        #EA4445; /* primary — pioneering, energetic, determined */
  --hvn-red-dark:   #C93939; /* hover, emphasized subheads, special section bg */
  --hvn-red-tint:   #FDECEC; /* soft highlight bg: notices, quotes, callouts */

  /* logo-native reds/grays (for exact asset matching) */
  --hvn-mark-red:   #E84443;
  --hvn-mark-gray:  #808080;
  --hvn-ink-logo:   #231F20;

  /* ---------- NEUTRALS ---------- */
  --hvn-ink:        #333333; /* body text — softer than pure black */
  --hvn-gray:       #808080; /* secondary text, quiet icons, dividers */
  --hvn-surface:    #F5F5F5; /* section separation bg, clean + modern */
  --hvn-white:      #FFFFFF; /* negative space, primary bg, text on dark */

  /* derived neutral steps (oklch-harmonised, for borders/states) */
  --hvn-gray-100:   #F5F5F5;
  --hvn-gray-200:   #ECECEC;
  --hvn-gray-300:   #DCDCDC;
  --hvn-gray-400:   #BFBFBF;
  --hvn-gray-500:   #808080;
  --hvn-gray-600:   #595959;
  --hvn-gray-700:   #333333;
  --hvn-gray-900:   #1A1A1A;

  /* ---------- FUNCTIONAL (UI feedback only — never decorative) ---------- */
  --hvn-success:    #28A745; /* success, "completed", checkmarks */
  --hvn-info:       #17A2B8; /* informational, guidance */
  --hvn-warning:    #FFC107; /* warnings, needs attention */
  --hvn-danger:     #EA4445; /* errors reuse brand red */

  --hvn-success-tint: #E7F6EC;
  --hvn-info-tint:    #E4F4F7;
  --hvn-warning-tint: #FFF6DD;

  /* ---------- SEMANTIC ALIASES ---------- */
  --fg1:            var(--hvn-ink);     /* primary text */
  --fg2:            var(--hvn-gray);    /* secondary text */
  --fg-inverse:     var(--hvn-white);   /* text on dark/red */
  --bg1:            var(--hvn-white);   /* base canvas */
  --bg2:            var(--hvn-surface); /* raised/section */
  --accent:         var(--hvn-red);
  --accent-hover:   var(--hvn-red-dark);
  --border:         var(--hvn-gray-300);
  --border-strong:  var(--hvn-gray-400);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Google Sans', sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* weights — Google Sans ships 400/500/600/700 only */
  --w-light:    400;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    700;

  /* type scale (1.250 major-third) */
  --t-display: 3.815rem; /* 61px */
  --t-h1:      3.052rem; /* 49px */
  --t-h2:      2.441rem; /* 39px */
  --t-h3:      1.953rem; /* 31px */
  --t-h4:      1.563rem; /* 25px */
  --t-h5:      1.25rem;  /* 20px */
  --t-body-lg: 1.125rem; /* 18px */
  --t-body:    1rem;     /* 16px */
  --t-small:   0.875rem; /* 14px */
  --t-caption: 0.75rem;  /* 12px */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* ---------- RADII ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(35,31,32,0.06);
  --shadow-sm: 0 1px 3px rgba(35,31,32,0.08), 0 1px 2px rgba(35,31,32,0.06);
  --shadow-md: 0 4px 12px rgba(35,31,32,0.08), 0 2px 4px rgba(35,31,32,0.05);
  --shadow-lg: 0 12px 28px rgba(35,31,32,0.10), 0 4px 8px rgba(35,31,32,0.06);
  --shadow-red: 0 8px 24px rgba(234,68,69,0.28); /* CTA glow */

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.hvn-display {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h1, .hvn-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h2, .hvn-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h3, .hvn-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
h4, .hvn-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
h5, .hvn-h5 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-h5);
  line-height: var(--lh-normal);
  color: var(--fg1);
}
.hvn-overline {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}
p, .hvn-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
}
.hvn-body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
}
.hvn-small {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
.hvn-caption {
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
code, .hvn-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}