/* ============================================================
   FourOneSix IT — Website V2 — Design Tokens
   ------------------------------------------------------------
   Aesthetic primitives for the V2 site.
   Reference: linear.app's restraint, adapted for a fractional
   CIO/CTO practice (not a SaaS product).

   Explicit non-goals, encoded here so we catch them later:
   - NO Inter (V1 AI tell)
   - NO JetBrains Mono (V1 AI tell)
   - NO serif fonts at all (rejected V2 editorial direction)
   - NO multi-color palette (one accent, max)
   - NO gradient decoration (V1 AI tell)
   ============================================================ */

/* --- Typography stack ----------------------------------------
   Primary:  Geist (Vercel's open-source sans).
   Mono:     Geist Mono (used sparingly — technical callouts).
   Fallback: system UI sans so the site still loads gracefully
             if Google Fonts is blocked by a client firewall.
   ------------------------------------------------------------ */
:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  /* Type scale — generous, precise. Each step ~1.2–1.25x the last.
     Values expressed in rem so they respond to user zoom. */
  --fs-xs:   0.75rem;   /* 12px — footnotes, meta */
  --fs-sm:   0.875rem;  /* 14px — nav, small UI */
  --fs-base: 1rem;      /* 16px — body */
  --fs-md:   1.125rem;  /* 18px — prose emphasis */
  --fs-lg:   1.375rem;  /* 22px — section intro */
  --fs-xl:   1.75rem;   /* 28px — small headings */
  --fs-2xl:  2.25rem;   /* 36px — medium headings */
  --fs-3xl:  3rem;      /* 48px — large headings */
  --fs-4xl:  4rem;      /* 64px — hero on tablet */
  --fs-5xl:  5.5rem;    /* 88px — hero on desktop */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Letter-spacing: negative on display, zero-ish on body,
     positive on uppercase meta labels (but never decorative). */
  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-body:    -0.005em;
  --ls-meta:    0.06em;
}

/* --- Color palette -------------------------------------------
   Warm off-white background, deep graphite ink, orange accent
   used sparingly. Warm grays for hierarchy, not cool.
   ------------------------------------------------------------ */
:root {
  /* Surfaces */
  --c-bg:          #FAFAF7;   /* warm off-white */
  --c-bg-2:        #F3F2EC;   /* raised surface, e.g. form */
  --c-bg-dark:     #1A1815;   /* deep charcoal — used for ONE section */
  --c-bg-dark-2:   #26231E;   /* dark raised surface */

  /* Ink */
  --c-ink:         #0E0E0E;   /* primary text on light */
  --c-ink-2:       #2A2825;   /* secondary text on light */
  --c-ink-3:       #6B6258;   /* tertiary / meta */
  --c-ink-4:       #9A9085;   /* faint / disabled */
  --c-ink-on-dark: #F5F1EA;   /* primary text on dark */
  --c-ink-on-dark-2:#B8B1A5;  /* secondary text on dark */

  /* Dividers */
  --c-line:        #E5E0D6;   /* warm hairline */
  --c-line-dark:   #3A362F;   /* hairline on dark surface */

  /* Accent — your logo orange. Used sparingly and deliberately. */
  --c-accent:      #ED7D3A;
  --c-accent-ink:  #B85D22;   /* darker variant for text-on-light links */
  --c-accent-soft: #F7D4B8;   /* very muted, for rare wash accents */

  /* Warm surface — a section-wide orange wash, used for monumental
     moments (pullquotes, signature CTAs). Reads as "intentionally
     tinted" without being loud. */
  --c-bg-warm:     #FBE4CC;
  --c-line-warm:   #EBC29B;   /* hairline that stays warm on warm bg */
}

/* --- Spacing scale -------------------------------------------
   8-based grid. Anything decorative should use these and nothing else.
   ------------------------------------------------------------ */
:root {
  --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;
  --sp-11: 160px;
  --sp-12: 200px;
}

/* --- Layout primitives --------------------------------------- */
:root {
  --content-max:  1120px;  /* main text content width */
  --content-wide: 1280px;  /* for occasional wider bands */
  --content-nav:  1280px;

  --nav-h:          112px;  /* tall nav — 80px logo with 16px of breathing room top/bottom */
  --nav-h-scrolled:  64px;  /* shrinks once the user starts scrolling */
  --radius-sm:    4px;
  --radius-md:    6px;  /* keep radii tight — rounded cards are out */
  --radius-lg:    8px;

  --shadow-sm:   0 1px 2px rgba(14,14,14,0.04);
  --shadow-md:   0 4px 16px rgba(14,14,14,0.06);
}

/* --- Motion --------------------------------------------------
   Subtle. Nothing bouncy, nothing decorative.
   ------------------------------------------------------------ */
:root {
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* --- Reset & base -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' on, 'cv11' on;  /* Geist's alt stylistic sets */
}

body {
  margin: 0;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-body);
  position: relative;
}

/* Paper grain — fixed overlay that makes every surface feel like
   printed paper rather than a flat render. Warm fiber tone (not
   pure gray) so it harmonizes with the off-white palette. Multiply
   blend mode means dark sections get darker grain, light sections
   stay light. Tuned to be visible but not distracting. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.6;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0 0.04  0 0 0 0.28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

::selection {
  background: var(--c-accent);
  color: #fff;
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}