/* =========================================================================
   Hillrichs Design System — Color & Type Foundations
   =========================================================================
   All tokens live here. Use semantic vars (--fg, --bg, --accent) in components;
   avoid reaching into the scale vars (--navy-800) unless you're building a
   token yourself.

   Fonts: Newsreader (serif display) + Manrope (sans body).
   NOTE: These are Google Fonts substitutes for the intended GT Sectra + General
   Sans licensed families. See README.md § Typography for the swap-in path.
   ========================================================================= */

@import url('./fonts/fonts.css');

:root {
  /* ---------- Color scale: Navy (primary) ---------- */
  --navy-50:  #F2F4F8;
  --navy-100: #E2E6EE;
  --navy-200: #C2CADA;
  --navy-300: #8E9BB4;
  --navy-400: #5A6A88;
  --navy-500: #2F3F5F;
  --navy-600: #1F2D49;
  --navy-700: #142038;
  --navy-800: #0C1628;   /* brand primary */
  --navy-900: #07101E;

  /* ---------- Color scale: Warm neutrals (bg + fg) ---------- */
  --paper-0:   #FFFFFF;
  --paper-50:  #FAF7F1;   /* brand off-white */
  --paper-100: #F4F0E7;
  --paper-200: #ECE6D8;
  --paper-300: #D9D1BE;
  --paper-400: #B8AE95;
  --paper-500: #8A8370;
  --paper-600: #5E5848;

  /* ---------- Color scale: Gold (accent) ---------- */
  --gold-50:   #F8F2E1;
  --gold-100:  #EEE0B4;
  --gold-200:  #E0C97A;
  --gold-300:  #C9A84B;
  --gold-400:  #A8872C;   /* primary accent — passes AA on paper-50 */
  --gold-500:  #8A6E1E;
  --gold-600:  #6B5415;

  /* ---------- Color scale: Teal (secondary / data accent) ---------- */
  --teal-100: #D7E2E0;
  --teal-300: #6D9590;
  --teal-500: #2E5954;
  --teal-700: #1A3A37;

  /* ---------- Semantic: surface ---------- */
  --bg:            var(--paper-50);
  --bg-raised:     var(--paper-0);
  --bg-sunken:     var(--paper-100);
  --bg-inverse:    var(--navy-800);
  --bg-accent:     var(--gold-50);

  /* ---------- Semantic: foreground ---------- */
  --fg:            var(--navy-800);      /* body */
  --fg-muted:      var(--navy-500);      /* secondary text, captions */
  --fg-subtle:     var(--navy-300);      /* placeholders, disabled labels */
  --fg-inverse:    var(--paper-50);      /* text on navy */
  --fg-inverse-muted: var(--navy-200);
  --fg-accent:     var(--gold-500);      /* links, emphasis on paper */
  --fg-accent-inv: var(--gold-200);      /* accent on navy */

  /* ---------- Semantic: borders & rules ---------- */
  --rule:          rgba(12, 22, 40, 0.12);
  --rule-strong:   rgba(12, 22, 40, 0.24);
  --rule-inverse:  rgba(250, 247, 241, 0.14);
  --rule-accent:   var(--gold-300);

  /* ---------- Semantic: status ---------- */
  --success: #3E6B48;
  --warning: #A87216;
  --danger:  #8A2A2A;
  --info:    var(--teal-500);

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 0 rgba(12, 22, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(12, 22, 40, 0.06), 0 1px 1px rgba(12, 22, 40, 0.04);
  --shadow-md: 0 6px 16px -8px rgba(12, 22, 40, 0.18), 0 2px 4px rgba(12, 22, 40, 0.06);
  --shadow-lg: 0 24px 48px -24px rgba(12, 22, 40, 0.28), 0 8px 16px -8px rgba(12, 22, 40, 0.10);
  --shadow-inset: inset 0 0 0 1px var(--rule);

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-0:  0;
  --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;

  /* ---------- Type families ---------- */
  --font-serif: 'Newsreader', 'GT Sectra', 'Tiempos Text', Georgia, 'Times New Roman', serif;
  --font-sans:  'Manrope', 'General Sans', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (rem = 16px) ---------- */
  --step--1: 0.8125rem;   /* 13 — eyebrow / caption */
  --step-0:  0.9375rem;   /* 15 — body small */
  --step-1:  1rem;        /* 16 — body */
  --step-2:  1.125rem;    /* 18 — body lead */
  --step-3:  1.375rem;    /* 22 — h4 */
  --step-4:  1.75rem;     /* 28 — h3 */
  --step-5:  2.25rem;     /* 36 — h2 */
  --step-6:  3rem;        /* 48 — h1 */
  --step-7:  4.25rem;     /* 68 — display */
  --step-8:  6rem;        /* 96 — hero display */

  /* ---------- Letter-spacing ---------- */
  --tracking-eyebrow: 0.14em;   /* ALL CAPS eyebrows */
  --tracking-tight:  -0.02em;   /* display serifs */
  --tracking-body:    0;

  /* ---------- Line-heights ---------- */
  --leading-display: 1.04;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-body:    1.55;
  --leading-loose:   1.7;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- Layout ---------- */
  --page-max: 1280px;
  --prose-max: 68ch;
  --rule-width: 1px;
}

/* =========================================================================
   Base element styles — semantic, apply to raw HTML
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

.display, h1.display {
  font-size: clamp(var(--step-6), 6vw, var(--step-8));
  line-height: var(--leading-display);
  letter-spacing: -0.025em;
  font-weight: 300;
}

h1, .h1 { font-size: var(--step-6); }
h2, .h2 { font-size: var(--step-5); }
h3, .h3 { font-size: var(--step-4); }
h4, .h4 { font-size: var(--step-3); font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  color: var(--fg);
  max-width: var(--prose-max);
  text-wrap: pretty;
}
.lead { font-size: var(--step-2); line-height: var(--leading-snug); color: var(--fg); }
.small, small { font-size: var(--step-0); color: var(--fg-muted); }
.caption { font-size: var(--step--1); color: var(--fg-muted); letter-spacing: 0.01em; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
a:hover {
  color: var(--fg-accent);
  text-decoration-color: var(--fg-accent);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

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

::selection { background: var(--gold-200); color: var(--navy-800); }