/* ============================================================
   Arkytech — Colors & Type Foundations
   Brand teal #00A098 sampled from logo. Warm-neutral system,
   geometric-sans + editorial serif pairing. Lucide icons.
   ============================================================ */

/* -------- Web fonts (Google Fonts substitutes) ------------- */
/* Outfit  — geometric sans, matches the wordmark's even weight + open counters */
/* Fraunces — editorial serif w/ optical sizing for display */
/* JetBrains Mono — calm mono for code/data */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand palette ---------- */
  --ark-teal-900: #003F3C;
  --ark-teal-800: #006661;
  --ark-teal-700: #008079;
  --ark-teal-600: #00A098;   /* PRIMARY — sampled from logo stroke */
  --ark-teal-500: #1FB5AD;
  --ark-teal-400: #6FCFC9;
  --ark-teal-300: #A8DEDA;
  --ark-teal-200: #C8E0E0;   /* sampled from logo interior fill */
  --ark-teal-100: #E3F1F0;
  --ark-teal-50:  #F2F8F8;

  /* ---------- Warm neutrals (stone/sand) ---------- */
  --ark-stone-950: #14110D;
  --ark-stone-900: #1F1B16;
  --ark-stone-800: #2E2820;
  --ark-stone-700: #4A4238;
  --ark-stone-600: #6B6157;
  --ark-stone-500: #8B8276;
  --ark-stone-400: #ADA597;
  --ark-stone-300: #CFC8BB;
  --ark-stone-200: #E6E0D3;
  --ark-stone-150: #EFEAE0;
  --ark-stone-100: #F5F1E8;
  --ark-stone-50:  #FAF7F1;   /* warm page background */
  --ark-white:     #FFFEFB;   /* off-white card surface */

  /* ---------- Accents (used sparingly) ---------- */
  --ark-clay:      #C36A4A;   /* terracotta — warm accent */
  --ark-ochre:     #D9A441;   /* construction warning, highlight */
  --ark-ink:       #1A2B2A;   /* deep teal-ink, body text */

  /* ---------- Semantic ---------- */
  --ark-success:   #2E8B7C;
  --ark-warning:   #D9A441;
  --ark-danger:    #B5453A;
  --ark-info:      #00A098;

  /* ---------- Foreground / background tokens ---------- */
  --fg-1: var(--ark-ink);          /* primary text */
  --fg-2: var(--ark-stone-700);    /* secondary text */
  --fg-3: var(--ark-stone-500);    /* tertiary / meta */
  --fg-on-teal: var(--ark-white);
  --fg-link: var(--ark-teal-700);

  --bg-page:    var(--ark-stone-50);
  --bg-surface: var(--ark-white);
  --bg-sunken:  var(--ark-stone-100);
  --bg-tint:    var(--ark-teal-50);

  --border-1: rgba(31, 27, 22, 0.08);   /* hairline */
  --border-2: rgba(31, 27, 22, 0.14);   /* default */
  --border-strong: rgba(31, 27, 22, 0.24);

  /* ---------- Type families ---------- */
  --font-sans:    'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (modular, 1.25) ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  --leading-tight:  1.12;
  --leading-snug:   1.28;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

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

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

  /* ---------- Radii — architectural: sharp cards, soft controls ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;    /* default control */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- Shadows — low, warm, never bluish ---------- */
  --shadow-xs: 0 1px 2px rgba(31, 27, 22, 0.05);
  --shadow-sm: 0 1px 2px rgba(31, 27, 22, 0.04), 0 2px 6px rgba(31, 27, 22, 0.05);
  --shadow-md: 0 2px 4px rgba(31, 27, 22, 0.05), 0 8px 20px rgba(31, 27, 22, 0.07);
  --shadow-lg: 0 4px 8px rgba(31, 27, 22, 0.06), 0 16px 40px rgba(31, 27, 22, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-focus: 0 0 0 3px rgba(0, 160, 152, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   380ms; /* @kind other */
}

/* ============================================================
   Semantic typography elements
   Sans for UI; serif reserved for display/editorial moments.
   ============================================================ */

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

.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  color: var(--fg-1);
  text-wrap: balance;
}

h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  text-wrap: balance;
}

h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  text-wrap: balance;
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 600;
}

h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
}

h5 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
}

p, .body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  font-weight: 400;
  text-wrap: pretty;
}

.meta, small {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ark-teal-700);
}

.editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 14;
}

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

a {
  color: var(--fg-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ark-teal-800); }

::selection { background: var(--ark-teal-200); color: var(--ark-ink); }