/* ============================================================
   ARMADILLO DESIGN SYSTEM
   colors_and_type.css — foundation tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Figtree:wght@300;400;500;600;700&display=swap');

:root {
  /* ─── Surface / paper ────────────────────────────────────── */
  --bg:           #DEDEE0;   /* page background (cool light grey) */
  --bg-2:         #D2D3D6;   /* deeper grey, recessed surfaces */
  --paper:        #ECECEE;   /* cards, raised panels */
  --paper-warm:   #F5F4EF;   /* alt paper for print */

  /* ─── Ink (foreground) ───────────────────────────────────── */
  --ink:          #15161A;   /* primary text, ink black */
  --ink-2:        #4A4B50;   /* body grey */
  --muted:        #8A8B90;   /* meta / labels */
  --muted-2:      #B5B6BA;   /* disabled / hairline copy */

  /* ─── Lines ──────────────────────────────────────────────── */
  --line:         rgba(20,20,18,0.08);
  --line-strong:  rgba(20,20,18,0.14);

  /* ─── Accent (quiet grey, never neon) ────────────────────── */
  --accent:       #6B6C71;
  --accent-2:     #B8B9BD;   /* on dark surfaces */
  --accent-soft:  rgba(107,108,113,0.10);

  /* ─── Functional / dataviz palette (use sparingly) ───────── */
  --lime:         #C8E45F;   /* "live", success pings, wordmark dot, ghost-btn hover */
  --periwinkle:   #D1D8F1;   /* selected state, in-product highlights */
  --coral:        #FF6B57;   /* error, attention */
  --amber:        #E7C24A;   /* warning, highlight */

  /* ─── Dark surfaces (compliance, footer, deep panels) ────── */
  --dark:         #0C0C0A;
  --dark-2:       #16161A;
  --dark-line:         rgba(255,255,255,0.10);
  --dark-line-strong:  rgba(255,255,255,0.18);
  --dark-ink:     #ECEAE3;
  --dark-muted:   #8C8C88;
  --dark-muted-2: #B8B8B5;

  /* ─── Radii ──────────────────────────────────────────────── */
  --radius-s:  8px;
  --radius-m:  14px;
  --radius-l:  22px;
  --radius-pill: 999px;

  /* ─── Spacing (8px base) ─────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 130px;  /* section padding */

  /* ─── Shadows ────────────────────────────────────────────── */
  --shadow-card:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-lift:    0 18px 36px -22px rgba(20,20,18,0.18);
  --shadow-raise:   0 30px 60px -30px rgba(20,20,18,0.22);
  --shadow-hover:   0 38px 70px -28px rgba(20,20,18,0.28);

  /* ─── Type families ──────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Figtree', -apple-system, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  /* ─── Type scale (web) ──────────────────────────────────── */
  --t-display:   clamp(3rem, 7vw, 6.4rem);   /* hero h1 */
  --t-h1:        clamp(2.2rem, 4.6vw, 3.6rem);
  --t-h2:        clamp(1.6rem, 3vw, 2.4rem);
  --t-h3:        1.4rem;
  --t-h4:        1.15rem;
  --t-body:      1.0625rem;    /* 17px */
  --t-body-s:    0.95rem;
  --t-meta:      0.82rem;
  --t-label:     0.78rem;
  --t-micro:     0.66rem;

  /* ─── Easing / motion ───────────────────────────────────── */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:  120ms;
  --t-base:  200ms;
  --t-med:   350ms;
  --t-slow:  500ms;
}

/* ============================================================
   PAGE DEFAULTS
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background-color: var(--bg);
  /* signature cool-grey page gradient */
  background-image: linear-gradient(180deg, #D7D8DB 0%, #DEDEE0 18%, #E4E4E4 55%, #E0E0E1 100%);
  background-attachment: fixed;
  color: var(--ink-2);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); font-weight: 500; }

/* Hero display headline — large, looser tracking */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.96;
  font-size: var(--t-display);
}

/* Italic em inside a headline = grey accent, never blue/neon */
.display em, h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

/* Body */
p { font-size: var(--t-body); color: var(--ink-2); line-height: 1.55; }
p.lead { font-size: 1.2rem; color: var(--ink-2); }
small, .meta { font-size: var(--t-meta); color: var(--muted); }

/* Eyebrow label (Space Grotesk uppercase, with leading rule) */
.label {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.label::before {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Mono / code */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ink);
}

/* ============================================================
   PRINT TOKENS (print.css — see ./print.css)
   ============================================================ */
@media print {
  :root {
    /* lift contrast for ink-on-paper */
    --bg: #ffffff;
    --paper: #ffffff;
    --ink-2: #2A2B30;
    --muted: #6F7075;
    --line: rgba(20,20,18,0.20);
    --line-strong: rgba(20,20,18,0.32);
  }
  body { background: #fff; }
  /* fine type scale for A4 */
  h1 { font-size: 32pt; }
  h2 { font-size: 20pt; }
  h3 { font-size: 14pt; }
  body, p { font-size: 10.5pt; line-height: 1.45; }
}