/* ============================================================
   Henecorp.ai — Colors & Typography
   Single source of truth for design tokens.
   Sourced from: source/skills/henecorp-brand/SKILL.md
   ============================================================ */

/* --- Fonts ---------------------------------------------------
   Brand fonts are loaded from Google Fonts (CDN). Inter is the
   web/digital primary; JetBrains Mono is the mono. Office docs
   substitute Calibri / Consolas — those are system fonts, not
   web-loaded.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ===== PRIMARY PALETTE ===== */
  --brand-teal:  #0F6E56;  /* default brand color */
  --brand-navy:  #0A2540;  /* depth color, body text on light */
  --brand-mint:  #5DCAA5;  /* accent — only readable on dark */
  --brand-white: #FFFFFF;

  /* ===== NEUTRALS ===== */
  --neutral-ink:    #0A2540;  /* === navy; primary body text */
  --neutral-slate:  #475569;  /* captions, secondary text */
  --neutral-mist:   #E2E8F0;  /* dividers, table borders */
  --neutral-cloud:  #F1F5F9;  /* card backgrounds, soft bands */
  --neutral-paper:  #FAFBFC;  /* off-white pages */

  /* ===== SEMANTIC FG/BG ALIASES ===== */
  --fg-1: var(--brand-navy);          /* primary text */
  --fg-2: var(--neutral-slate);       /* secondary text, captions */
  --fg-accent: var(--brand-teal);     /* links, accents */
  --fg-on-dark: var(--brand-white);
  --fg-on-dark-accent: var(--brand-mint);

  --bg-1: var(--brand-white);         /* page background */
  --bg-2: var(--neutral-paper);       /* off-white page */
  --bg-3: var(--neutral-cloud);       /* card / section band */
  --bg-dark: var(--brand-navy);       /* dark hero */
  --bg-accent: var(--brand-teal);     /* section divider */

  --border-1: var(--neutral-mist);
  --border-2: var(--neutral-slate);

  /* ===== STATUS ===== */
  --state-success: #0F6E56;
  --state-warning: #B45309;
  --state-error:   #B91C1C;

  /* ===== TYPOGRAPHY ===== */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, Menlo, monospace;
  --font-office-fallback: Calibri, Arial, sans-serif; /* used in docx/pptx exports */

  /* Type scale (px). Sizes are ranges in the SKILL — these are the
     lower-bound defaults; bump up one notch for hero contexts. */
  --t-h1: 44px;
  --t-h2: 30px;
  --t-h3: 22px;
  --t-body: 17px;
  --t-small: 15px;
  --t-caption: 13px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;
  --lh-loose: 1.7;

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

  /* ===== SPACING (8px base) ===== */
  --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 =====
     Henecorp UI is grounded and clinical. Small radii only.
     Pull-quotes & CTAs may use 8pt; cards use 6pt. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ===== SHADOWS =====
     Restrained — the brand uses borders + cloud fill instead of
     drop shadows by default. These exist for floating UI only. */
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12);

  /* ===== MOTION =====
     Subtle, no bounces. Brand reads as patient and grounded. */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE — drop-in classes / element defaults
   ============================================================ */

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

.h1, h1 {
  font: 600 var(--t-h1)/var(--lh-tight) var(--font-sans);
  color: var(--brand-navy);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.h2, h2 {
  font: 600 var(--t-h2)/var(--lh-snug) var(--font-sans);
  color: var(--brand-navy);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.h3, h3 {
  font: 500 var(--t-h3)/var(--lh-snug) var(--font-sans);
  color: var(--brand-teal);
  letter-spacing: 0;
  margin: 0 0 var(--space-3);
}
.body, p {
  font: 400 var(--t-body)/var(--lh-body) var(--font-sans);
  color: var(--brand-navy);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.small {
  font-size: var(--t-small);
  line-height: var(--lh-body);
}
.caption {
  font: 400 var(--t-caption)/var(--lh-snug) var(--font-sans);
  color: var(--neutral-slate);
  letter-spacing: 0;
}
.eyebrow {
  font: 600 var(--t-caption)/1.2 var(--font-sans);
  color: var(--brand-teal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
code, .code, .mono {
  font: 400 0.95em/1.5 var(--font-mono);
  color: var(--brand-navy);
}

a {
  color: var(--brand-teal);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* Body on dark surfaces */
.on-dark { color: var(--brand-white); }
.on-dark .h3, .on-dark h3 { color: var(--brand-mint); }
.on-dark .caption { color: rgba(255,255,255,0.72); }
.on-dark a { color: var(--brand-mint); }