/* =========================================================
   Copied from grove-technical-group-design-system/project/colors_and_type.css.
   Site changes: font paths point to ../assets/fonts/, and the Google Fonts
   @import (invalid after @font-face) moved to a <link> in each page.

   Grove Technical Group — Design Tokens
   Colors & Type foundations
   ========================================================= */

/* --- Fonts ------------------------------------------------ */
/* Figtree is self-hosted from the brand-provided variable font files.
   Lora and Fira Code are pulled from Google Fonts. */
@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* --- Light theme (default) ------------------------------- */
:root,
:root[data-theme="light"] {
  /* Brand core */
  --gtg-navy:        #053846;  /* Primary — deep, calm, confident */
  --gtg-powder:      #94d1e2;  /* Secondary — supportive */
  --gtg-cyan:        #55c4e3;  /* Accent — signal */
  --gtg-ink:         #111517;
  --gtg-paper:       #fafcfc;

  /* Extended neutrals (derived) */
  --gtg-neutral-50:  #f5f8f9;
  --gtg-neutral-100: #e9eef0;
  --gtg-neutral-200: #d3dde0;
  --gtg-neutral-300: #b2c0c5;
  --gtg-neutral-400: #7d8d93;
  --gtg-neutral-500: #576468;
  --gtg-neutral-600: #3c474b;
  --gtg-neutral-700: #252c2f;
  --gtg-neutral-800: #171c1e;
  --gtg-neutral-900: #0b0e0f;

  /* Extended brand tints (derived from navy) */
  --gtg-navy-50:     #e8f1f4;
  --gtg-navy-100:    #c9dde3;
  --gtg-navy-200:    #8fb6c2;
  --gtg-navy-300:    #4e8a9a;
  --gtg-navy-400:    #1f6275;
  --gtg-navy-500:    #053846;   /* === primary === */
  --gtg-navy-600:    #042c37;
  --gtg-navy-700:    #032129;
  --gtg-navy-800:    #02161b;

  --gtg-cyan-50:     #e7f7fc;
  --gtg-cyan-100:    #c3ebf5;
  --gtg-cyan-200:    #94d1e2;   /* === secondary === */
  --gtg-cyan-300:    #6fd2ec;
  --gtg-cyan-400:    #55c4e3;   /* === accent === */
  --gtg-cyan-500:    #2fa9cc;
  --gtg-cyan-600:    #1e8aab;

  /* Semantic surface tokens */
  --text:            var(--gtg-ink);
  --text-muted:      var(--gtg-neutral-500);
  --text-subtle:     var(--gtg-neutral-400);
  --text-inverse:    #fafcfc;
  --background:      var(--gtg-paper);
  --surface:         #ffffff;
  --surface-raised:  #ffffff;
  --surface-sunken:  var(--gtg-neutral-50);
  --border:          var(--gtg-neutral-200);
  --border-strong:   var(--gtg-neutral-300);
  --primary:         var(--gtg-navy);
  --primary-hover:   #073f4f;
  --primary-press:   #032e3a;
  --on-primary:      #fafcfc;
  --secondary:       var(--gtg-powder);
  --accent:          var(--gtg-cyan);
  --focus-ring:      color-mix(in oklab, var(--gtg-cyan) 55%, transparent);

  /* Status */
  --success:         #2f855a;
  --warning:         #b7791f;
  --danger:          #b54242;
  --info:            var(--gtg-cyan-500);

  /* Typography families */
  --font-sans:       'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:      'Lora', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:       'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (fluid-ish, desktop) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  80px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Tracking */
  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.12em;

  /* Spacing (4px base) */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32: 128px;

  /* Radii */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* Shadows — calm & architectural, never puffy */
  --shadow-xs: 0 1px 1px rgba(5,56,70,0.04), 0 1px 2px rgba(5,56,70,0.04);
  --shadow-sm: 0 1px 2px rgba(5,56,70,0.05), 0 2px 4px rgba(5,56,70,0.04);
  --shadow-md: 0 4px 10px -2px rgba(5,56,70,0.08), 0 2px 4px rgba(5,56,70,0.04);
  --shadow-lg: 0 12px 28px -8px rgba(5,56,70,0.12), 0 6px 12px -6px rgba(5,56,70,0.06);
  --shadow-xl: 0 24px 48px -12px rgba(5,56,70,0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* --- Dark theme ------------------------------------------ */
:root[data-theme="dark"] {
  --text:           #e8ecee;
  --text-muted:     #a4b1b6;
  --text-subtle:    #6c797e;
  --text-inverse:   #040606;
  --background:     #040606;
  --surface:        #0c1114;
  --surface-raised: #11181c;
  --surface-sunken: #070a0b;
  --border:         #1a2328;
  --border-strong:  #2a3940;

  --primary:        #b7ecfa;
  --primary-hover:  #cdf2fb;
  --primary-press:  #9fe1f3;
  --on-primary:     #04161b;
  --secondary:      #1e5b6c;
  --accent:         #1c8cab;
  --focus-ring:     color-mix(in oklab, #55c4e3 60%, transparent);

  --shadow-xs: 0 1px 1px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 10px -2px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 28px -8px rgba(0,0,0,0.6);
  --shadow-xl: 0 24px 48px -12px rgba(0,0,0,0.7);
}

/* =========================================================
   Semantic type — element-level defaults
   ========================================================= */
html { color-scheme: light dark; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--primary);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--primary);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--text);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--text);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text);
}
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

p, .p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text);
  max-width: 68ch;
}

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 52ch;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}

.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-6xl);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--primary);
}

blockquote, .quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
  max-width: 60ch;
}

code, kbd, samp, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.1em 0.35em;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  background: var(--gtg-navy-800, #02161b);
  color: #dfeef4;
  padding: var(--s-5);
  border-radius: var(--r-md);
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

small, .small {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

a {
  color: var(--primary);
  text-decoration-color: color-mix(in oklab, var(--primary) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-8) 0;
}

::selection { background: var(--gtg-cyan-200); color: var(--gtg-navy); }

/* Utility */
.container { max-width: 1200px; margin: 0 auto; padding-inline: var(--s-6); }