/* =====================================================================
   VeraOps Design System — Colors & Type
   =====================================================================
   Brand: VeraOps ("Existing Relationship Operations")
   Voice: Warm, direct, confident. Consulting-firm professional.
   Visual: Editorial serif display + clean modern sans body.
           Three foundation colors only — black, white, and a pale
           green-cream paper (#F3F8EA). Imagery-rich, layered cards
           with floating notification chips (Offload-inspired).
   ===================================================================== */

/* ---- Webfonts (Google Fonts substitutes — see fonts/README.md) -------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* =================================================================
     COLOR — Foundation (only three)
     Pale green-cream paper, pure white surface, pure black ink.
     Everything else derives from these.
     ================================================================= */
  --paper:        #F3F8EA;   /* page background — pale green-cream */
  --paper-2:      #EAF0DC;   /* sunken / subtle stripe (paper × 4% black) */
  --surface:      #FFFFFF;   /* cards, panels lifted off paper */
  --surface-ink:  #F8FBF1;   /* cards on cards (e.g. inside a panel) */

  --ink:          #000000;   /* primary text — pure black */
  --ink-2:        #2B2B2B;   /* secondary text */
  --ink-3:        #6B6B6B;   /* tertiary / metadata */
  --ink-4:        #A8A8A8;   /* hairline labels, disabled */

  --hairline:     #DCE3CD;   /* borders on paper — paper × 12% black */
  --hairline-2:   #C5CFB1;   /* stronger separators */

  /* =================================================================
     COLOR — Accents (sparingly)
     The brand is mostly black + paper. A single warm-gold "Spark"
     marks the italic highlight in display headlines and small
     accent moments. Status colors (Signal / Rust) are reserved for
     product UI, not marketing.
     ================================================================= */
  --spark:        #E5A83D;   /* italic highlight in headlines */
  --spark-deep:   #B7811F;   /* hover / on-light */
  --spark-soft:   #F4D89A;   /* tints, badge fills */
  --spark-paper:  #FBF1D8;   /* faintest fill */

  --signal:       #2D6B4F;   /* "live signal detected" — product UI only */
  --signal-soft:  #DCE9DF;
  --rust:         #C2410C;   /* Tier A / urgent — product UI only */
  --rust-soft:    #F4D9C9;

  /* =================================================================
     COLOR — Semantic
     ================================================================= */
  --bg:           var(--paper);
  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-subtle:    var(--ink-3);
  --border:       var(--hairline);
  --accent:       var(--spark);
  --accent-fg:    var(--ink);        /* text on --accent */
  --link:         var(--ink);        /* links are ink + underline, not blue */
  --link-hover:   var(--ink-2);

  --success:      var(--signal);
  --warning:      var(--spark);
  --danger:       var(--rust);

  /* =================================================================
     TYPOGRAPHY — Families
     Display: Newsreader  (warm modern serif — substitute for the
              editorial serif used in marketing headlines)
     Body:    Geist        (clean, neutral sans for UI + long copy)
     Mono:    Geist Mono   (data, email metadata, code)
     ================================================================= */
  --font-display: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale — a slightly compressed editorial scale.
     Display sizes lean larger than typical SaaS; body stays grounded. */
  --fs-eyebrow:   12px;     /* SECTION LABEL · uppercase tracked */
  --fs-meta:      13px;     /* metadata, timestamps */
  --fs-body-s:    14px;
  --fs-body:      16px;
  --fs-body-l:    18px;
  --fs-lead:      21px;     /* intro paragraphs */
  --fs-h6:        16px;
  --fs-h5:        18px;
  --fs-h4:        22px;
  --fs-h3:        28px;
  --fs-h2:        38px;
  --fs-h1:        56px;
  --fs-display:   80px;     /* hero headlines */

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  --tracking-eyebrow: 0.12em;
  --tracking-tight:   -0.02em;
  --tracking-display: -0.025em;

  /* =================================================================
     SPACING — 4px base; named tokens preferred in components.
     ================================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =================================================================
     RADII — Modest. Cards are soft rectangles, not pills.
     ================================================================= */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* =================================================================
     ELEVATION — Mostly hairline borders. Shadows are soft + warm.
     ================================================================= */
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 14px -4px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.05);
  --shadow-chip: 0 2px 8px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-inset: inset 0 0 0 1px var(--hairline);

  /* =================================================================
     MOTION — Quiet. Quick fades + small lifts. No bounce.
     ================================================================= */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   Apply these as defaults so plain HTML feels on-brand.
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
p.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-2); }

.eyebrow,
.eyebrow * {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-3);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-2);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
small { font-size: var(--fs-meta); color: var(--ink-3); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-10) 0; }

::selection { background: var(--spark-soft); color: var(--ink); }