/* =============================================================
   AGENTIFY — Colors & Type
   AI-Native Engineering Agency
   "Built to replace. Designed to compound."
   ============================================================= */

/* ---- 1. FONTS ----------------------------------------------- */
/* Display: high-contrast modern serif (engraved feel). 
   Brand spec calls for "Agentify Display"; nearest free analogue is
   Cormorant Garamond — same wide proportions, sharp engraved serifs.
   Body / system: a clean grotesque. Brand spec: "Agentify Sans";
   nearest analogue is Inter / IBM Plex Sans. We use Inter Tight here.
   *** SUBSTITUTION FLAGGED — replace with licensed Agentify fonts when available *** */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- 2. COLOR TOKENS ---------------------------------------- */
:root {
  /* —— Brand palette (from board 03) —— */
  --ivory:        #F7F5F1;  /* primary surface */
  --pale-blush:   #F2DED9;  /* warmth, subtle emphasis */
  --powder-blue:  #D6DFEC;  /* calm, intelligent accent */
  --muted-sage:   #B9C2B2;  /* natural, grounded contrast */
  --mist-gray:    #E6E4E1;  /* neutral structure & balance */
  --warm-sand:    #EADFC7;  /* soft support for layered surfaces */
  --muted-brass:  #B38E4A;  /* premium signal, used with restraint */
  --oxide-red:    #8E3A32;  /* accent for callouts & critical actions */
  --onyx:         #1A1A1C;  /* primary ink */
  --charcoal:     #2A2A2D;  /* secondary ink */

  /* —— Semantic foreground —— */
  --fg-1: var(--onyx);          /* headings, primary text */
  --fg-2: #4A4A4D;              /* body */
  --fg-3: #76736E;              /* secondary, captions */
  --fg-muted: #A8A39B;          /* meta, dividers, fine print */
  --fg-accent: var(--oxide-red);/* call-outs, emphasis runs */
  --fg-brass:  var(--muted-brass);

  /* —— Semantic background —— */
  --bg-canvas: var(--ivory);
  --bg-paper:  #FBFAF7;         /* slightly brighter card */
  --bg-card:   #FFFFFF;
  --bg-tint:   #F1EEE8;         /* recessed panels */
  --bg-ink:    var(--onyx);     /* dark sections */

  /* —— Borders & rules —— */
  --rule:        rgba(26, 26, 28, 0.12);
  --rule-strong: rgba(26, 26, 28, 0.24);
  --rule-brass:  rgba(179, 142, 74, 0.55);
  --rule-hair:   rgba(26, 26, 28, 0.07);

  /* —— Type families —— */
  --font-display: 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --font-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* —— Type scale (display / refined modern serif feel) —— */
  --fs-display:  clamp(56px, 9vw, 132px);
  --fs-h1:       clamp(40px, 5.5vw, 72px);
  --fs-h2:       clamp(28px, 3.4vw, 44px);
  --fs-h3:       22px;
  --fs-lead:     20px;
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-caption:  12px;
  --fs-eyebrow:  11px;   /* ALL CAPS small labels */

  /* —— Spacing —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* —— Radii (very subtle — editorial) —— */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;

  /* —— Shadow (very restrained) —— */
  --shadow-paper: 0 1px 0 rgba(26,26,28,0.04), 0 12px 32px -16px rgba(26,26,28,0.10);
  --shadow-card:  0 1px 2px rgba(26,26,28,0.04), 0 6px 18px -10px rgba(26,26,28,0.10);
  --shadow-deep:  0 24px 60px -32px rgba(26,26,28,0.30);

  /* —— Motion —— */
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:  120ms;
  --t-base:  220ms;
  --t-slow:  420ms;
}

/* ---- 3. SEMANTIC TYPE -------------------------------------- */
/* Apply these via class names; keep elements semantic. */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

.t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-3);
}

.t-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--fg-1);
}

/* —— Inline accent —— editorial highlight on emphasized clauses */
.t-accent { color: var(--fg-accent); }
.t-brass  { color: var(--fg-brass); }
.t-italic { font-style: italic; }

/* ---- 4. RULES & DIVIDERS ----------------------------------- */
.rule        { height: 1px; background: var(--rule); border: 0; width: 100%; }
.rule-strong { height: 1px; background: var(--rule-strong); border: 0; width: 100%; }
.rule-brass  { height: 1px; background: var(--rule-brass); border: 0; width: 100%; }
.rule-hair   { height: 1px; background: var(--rule-hair); border: 0; width: 100%; }

/* Numbered / labeled section header (a recurring brand pattern) */
.section-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.section-num {
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  color: var(--fg-brass);
  letter-spacing: 0.05em;
}

/* ---- 5. BASE RESET ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--oxide-red); color: var(--ivory); }