/* HIFFICIENCY Corporate — Design Tokens (CSS Custom Properties)
   Source: live computed styles from https://hifficiency.shop/
   Tuned for a cleaner B2B-corporate feel. Drop into :root. */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, address {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, video { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; }

:root {
  /* ---- Brand ---- */
  --color-ink: #292926;
  /* primary brand: deep green-black */
  --color-ink-deep: #020912;
  /* near-black, dark sections */
  --color-accent: #C4A971;
  /* muted brass/gold — the single accent */

  /* ---- Neutrals ---- */
  --color-white: #FFFFFF;
  --color-off-white: #FCFCFC;
  --color-paper: #dee0d0;
  /* warm section tint */
  --color-paper-2: #DEE0D1;
  --color-contrast: #BFBFBF;
  --color-sage: #C4C9A1;

  /* ---- Semantic ---- */
  --color-text: var(--color-ink);
  --color-text-muted: rgba(22, 38, 31, 0.75);
  --color-text-on-dark: var(--color-off-white);
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-paper);
  --color-bg-dark: var(--color-ink);
  --color-border: rgba(22, 38, 31, 0.15);
  --color-link: var(--color-ink);
  --color-link-hover: var(--color-accent);

  /* ---- Typography ---- */
  --font-heading: "SF Mono", "JetBrains Mono", Menlo, Consolas, Monaco, monospace;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 600;

  --ls-heading: 0.75px;
  --ls-button: 1px;
  --ls-eyebrow: 1.5px;

  --fs-xs: 0.85rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.40625rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.25rem;
  --fs-4xl: 4.25rem;

  --lh-tight: 1.1;
  --lh-heading: 1.24;
  --lh-body: 1.6;

  /* ---- Spacing (8px grid) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-section: 6rem;

  /* ---- Radius ---- */
  --radius-none: 0px;
  --radius-sm: 0.5rem;
  /* 8px */
  --radius-md: 0.8rem;
  /* cards */
  --radius-pill: 100px;
  --radius-button: 0px;
  /* buttons are square on this brand */

  /* ---- Elevation (used sparingly) ---- */
  --shadow-sm: 0 1px 2px rgba(22, 38, 31, 0.06);
  --shadow-card: 0 4px 5px rgba(22, 38, 31, 0.05);
  --shadow-raised: 0 8px 24px rgba(22, 38, 31, 0.10);

  /* ---- Layout ---- */
  --page-max: 80rem;
  /* 1280px */
  --page-wide: 96rem;
  --gutter: 1.5rem;
  --gutter-desktop: 2rem;
}

/* ---- Base element defaults ---- */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-heading);
  color: var(--color-ink);
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-2xl);
}

h3 {
  font-size: var(--fs-lg);
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-button);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-button);
  border: none;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-off-white);
}

.btn--primary:hover {
  background: var(--color-ink-deep);
}

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}

.btn--secondary:hover {
  background: var(--color-ink);
  color: var(--color-off-white);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-ink);
}

/* ---- Layout helpers ---- */
.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
}

.section--alt {
  background: var(--color-bg-alt);
}

.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}