/* HoneyCoin — Colors & Type
 * Design tokens distilled from the Figma brand guideline + B2B landing page.
 * Primary brand color is the honey gold #F29E22.
 * Secondary canonical surface is the warm off-white #FFF9F0 ("Honey Cream"),
 * paired with deep ink #22202F. Teal #134E64 is used as a secondary accent
 * (used for headlines, link/CTA hovers, and on-brand callouts in decks).
 *
 * Typography pairing:
 *   --font-display  → PP Telegraf  (headlines, brand display)
 *   --font-body     → Inter        (running text, UI labels, buttons)
 *   --font-mono     → DM Mono      (code blocks)
 */

/* ---------- Inter (body/UI) — loaded from Google Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap");

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "PP Telegraf";
  src: url("fonts/PPTelegraf-UltraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("fonts/PPTelegraf-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("fonts/PPTelegraf-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("fonts/PPTelegraf-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("fonts/PPTelegraf-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("fonts/PPTelegraf-UltraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand palette */
  --hc-honey:        #F29E22;   /* primary brand — buttons, accents, logo */
  --hc-honey-600:    #D9881A;   /* hover */
  --hc-honey-300:    #FFC764;   /* highlights, badges */
  --hc-honey-200:    #FFDC96;   /* soft fills */
  --hc-honey-100:    #FFE9C0;   /* very soft fills */

  --hc-cream:        #FFF9F0;   /* warm off-white — primary deck/section bg */
  --hc-cream-200:    #F4E8DE;   /* slide cover bg, soft cards */
  --hc-cream-300:    #EFD9C5;

  --hc-ink:          #22202F;   /* primary text on light */
  --hc-ink-soft:     #38474D;   /* secondary text */
  --hc-ink-muted:    #606C70;   /* tertiary text */
  --hc-ink-faint:    #8E8D93;   /* placeholder, captions */

  --hc-night:        #061920;   /* deep teal-black — code blocks, dark CTAs */
  --hc-night-700:    #0A2330;
  --hc-night-500:    #134E64;   /* secondary accent — headlines, links */
  --hc-night-400:    #2B6478;
  --hc-night-tint:   #6BAFBF;   /* approachable teal */

  /* Surfaces */
  --hc-bg:           #FFFFFF;
  --hc-bg-soft:      #FBFBFB;
  --hc-bg-subtle:    #F6F8F9;
  --hc-line:         #E2E2E2;
  --hc-line-soft:    #EFEFEF;

  /* Status (used sparingly, in product UI) */
  --hc-success:      #1F9D55;
  --hc-success-bg:   #E6F5EC;
  --hc-warning:      #F2A93D;
  --hc-warning-bg:   #FFF3DE;
  --hc-danger:       #AF513A;
  --hc-danger-bg:    #FBE9E2;
  --hc-info:         #6941C6;   /* the lavender used in deck callouts */
  --hc-info-bg:      #F0EBFA;

  /* Semantic */
  --fg-1: var(--hc-ink);
  --fg-2: var(--hc-ink-soft);
  --fg-3: var(--hc-ink-muted);
  --fg-faint: var(--hc-ink-faint);
  --fg-on-dark: #FFFFFF;
  --fg-on-honey: var(--hc-ink);

  --bg-1: var(--hc-bg);
  --bg-2: var(--hc-bg-soft);
  --bg-3: var(--hc-bg-subtle);
  --bg-cream: var(--hc-cream);
  --bg-dark: var(--hc-night);

  /* Type
   * Display/headlines: PP Telegraf (the brand font).
   * Body & UI: Inter — preferred running-text face.
   * Code: DM Mono.
   */
  --font-display: "PP Telegraf", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-ui:      "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii — HoneyCoin uses friendly mid-large radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows — soft, low-contrast, honey-tinted */
  --shadow-sm: 0 1px 2px rgba(34, 32, 47, 0.05);
  --shadow-md: 0 6px 16px rgba(34, 32, 47, 0.06), 0 1px 2px rgba(34, 32, 47, 0.04);
  --shadow-lg: 0 18px 40px rgba(34, 32, 47, 0.08), 0 4px 10px rgba(34, 32, 47, 0.04);
  --shadow-honey: 0 12px 28px rgba(242, 158, 34, 0.28);
  --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.2);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type scale ----------
 * Display = PP Telegraf 600/700 — used for hero headlines, slide titles.
 * UI body = PP Telegraf 400/500 for marketing; Inter is acceptable for product UI density.
 * Letter-spacing trends slightly negative on display; positive + uppercase for eyebrows.
 */
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -0.018em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.014em;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-honey-600);
}
.eyebrow-night { color: var(--hc-night-500); }

.body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-2);
}
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-3);
}
.caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-3);
}
.mono {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
}

/* Plain element selectors for unstyled prose */
h1 { font: 700 64px/1.06 var(--font-display); letter-spacing: -0.018em; color: var(--fg-1); margin: 0 0 .4em; }
h2 { font: 600 48px/1.1 var(--font-display);  letter-spacing: -0.014em; color: var(--fg-1); margin: 0 0 .4em; }
h3 { font: 600 32px/1.14 var(--font-display); letter-spacing: -0.01em;  color: var(--fg-1); margin: 0 0 .4em; }
h4 { font: 600 24px/1.2 var(--font-display);  color: var(--fg-1); margin: 0 0 .4em; }
p  { font: 400 16px/1.55 var(--font-body); color: var(--fg-2); margin: 0 0 1em; }
small { font-size: 12px; color: var(--fg-3); }
code, pre { font-family: var(--font-mono); font-size: 13px; }