/* =========================================================================
   ZeroTouch CRM — Design tokens (MC27 structure x brand-board sensory)
   Source of truth for color, type, space, motion, elevation, breakpoints.
   Palette: Deep Navy #071A2F · Signal Teal #18C9C4 · Steel #536A7E · Cloud #F7FAFC
   MC27 invariants: radius 6px · transitions 150ms · restrained type scale ·
   no colored lateral border · zero emoji.
   ========================================================================= */

:root {
  /* ---- Brand core ---- */
  --navy-900: #071a2f; /* Deep Navy   — primary ink, dark surfaces        */
  --navy-800: #0b2238;
  --navy-700: #102b44;
  --navy-600: #173653;
  --teal-600: #11a8a4;
  --teal-500: #18c9c4; /* Signal Teal — the single living accent          */
  --teal-400: #46d6d2;
  --teal-100: #d2f5f3;
  --teal-050: #ecfbfa;
  --steel-700: #3c4f63;
  --steel-500: #536a7e; /* Steel Grey — secondary ink, muted             */
  --steel-400: #7488a0;
  --steel-300: #9fb0c2;
  --steel-200: #c9d7e3;
  --line: #d9e7ef;      /* hairline borders (brand board)                 */
  --cloud-050: #f7fafc; /* Cloud — app background                         */
  --white: #ffffff;

  /* ---- Semantic surfaces / ink ---- */
  --bg: var(--cloud-050);
  --bg-elevated: var(--white);
  --bg-sunken: #eef4f8;
  --bg-invert: var(--navy-900);
  --ink: var(--navy-900);
  --ink-2: var(--steel-500);
  --ink-3: var(--steel-400);
  --ink-invert: #eaf2f7;
  --ink-invert-2: var(--steel-200);
  --accent: var(--teal-500);
  --accent-strong: var(--teal-600);
  --accent-soft: var(--teal-050);
  --focus: var(--teal-500);

  /* ---- State (restrained, used as dots/badges, never big fills) ---- */
  --positive: #1c9c7d;
  --positive-soft: #e6f6f1;
  --negative: #c2453d;
  --negative-soft: #fbeceb;
  --warn: #b9821a;
  --warn-soft: #fbf2df;

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
    Consolas, monospace;

  /* Fluid, restrained scale (MC27: few sizes). clamp() spans all breakpoints. */
  --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);   /* hero          */
  --fs-h1: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --fs-h2: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --fs-body: 1rem;       /* 16px base                                     */
  --fs-small: 0.875rem;  /* 14px                                          */
  --fs-micro: 0.75rem;   /* 12px labels / eyebrows                        */

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.14em;

  /* ---- Spacing (4px base) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ---- Radius (MC27 = 6px) ---- */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---- Motion (MC27 = 150ms) ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t: 150ms;
  --t-slow: 260ms;

  /* ---- Elevation (soft, navy-tinted — sensory depth) ---- */
  --shadow-xs: 0 1px 2px rgba(7, 26, 47, 0.06);
  --shadow-sm: 0 2px 6px rgba(7, 26, 47, 0.07), 0 1px 2px rgba(7, 26, 47, 0.06);
  --shadow-md: 0 8px 24px rgba(7, 26, 47, 0.1), 0 2px 6px rgba(7, 26, 47, 0.06);
  --shadow-lg: 0 22px 48px rgba(7, 26, 47, 0.16), 0 6px 16px rgba(7, 26, 47, 0.08);
  --ring: 0 0 0 3px rgba(24, 201, 196, 0.35);

  /* ---- Layout: container caps per breakpoint ---- */
  --container: 100%;
  --gutter: var(--s-5);
  --header-h: 64px;

  color-scheme: light;
}

/* =========================================================================
   6 BREAKPOINTS — the responsive backbone
   xs  <480    small phones
   sm  480-767 large phones
   md  768-1023 tablets / small laptops
   lg  1024-1279 laptops
   xl  1280-1599 desktops
   2xl >=1600   large / wide displays
   ========================================================================= */
@media (min-width: 480px)  { :root { --container: 460px;  --gutter: var(--s-5); } }
@media (min-width: 768px)  { :root { --container: 720px;  --gutter: var(--s-6); --header-h: 68px; } }
@media (min-width: 1024px) { :root { --container: 968px;  --gutter: var(--s-6); --header-h: 72px; } }
@media (min-width: 1280px) { :root { --container: 1180px; --gutter: var(--s-7); } }
@media (min-width: 1600px) { :root { --container: 1360px; --gutter: var(--s-7); } }

/* =========================================================================
   RESET
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;          /* opsz: Inter Display kicks in on large type */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
p  { text-wrap: pretty; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: var(--teal-100); color: var(--navy-900); }

/* =========================================================================
   LAYOUT PRIMITIVES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(3rem, 2rem + 6vw, 7rem); }
.stack > * + * { margin-top: var(--flow, var(--s-4)); }

.grid { display: grid; gap: var(--s-5); }
.cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
@media (min-width: 768px)  { .cols-2 { grid-template-columns: repeat(2, 1fr); }
                             .cols-3 { grid-template-columns: repeat(2, 1fr); }
                             .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cols-3 { grid-template-columns: repeat(3, 1fr); }
                             .cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   UTILITIES (small, intentional — not a framework)
   ========================================================================= */
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}
.lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.center { text-align: center; }
.measure { max-width: 64ch; }
.measure-tight { max-width: 46ch; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hide-xs { display: none; }
@media (min-width: 480px) { .hide-xs { display: revert; } }
@media (max-width: 767px) { .only-md-up { display: none !important; } }