/* ───────────────────────────────────────────────────────────────
   DeftBid — Marketing Landing Page ("Ink" direction)
   A1 · Design tokens: color, typography, spacing, radius, shadow.

   Source of truth: design/landing/brand.jsx (the `DB` object) plus the
   README "Design tokens" section from the design handoff. Every section
   ticket (B–F) consumes these variables — no raw hex in components.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Color ──────────────────────────────────────────────────── */
  /* Brand cobalt */
  --cobalt:        #2D6BF0;            /* primary brand — large graphics, icon fills, glow, big accents */
  --solid:         #2052D6;            /* CTA button fill behind white text (light contexts) */
  --press:         #163FA8;            /* pressed button state */
  --bid-text:      #1B4DC2;            /* small cobalt text / links / eyebrows on light (AA-safe) */

  /* Ink / dark surfaces */
  --ink:           #14171C;            /* primary body text on light; footer background */
  --ink-hero:      #0E1014;            /* hero + CTA dark canvas (a touch darker than --ink) */
  --ink-2:         #1B1F26;            /* elevated dark tile */
  --ink-3:         #272C36;            /* dark hairline / lifted */

  /* Light surfaces */
  --paper:         #EEF1F5;            /* cool light section background */
  --card:          #FFFFFF;            /* card / white section */
  --card-2:        #F4F7FB;            /* recessed / alt fill */

  /* Text on light */
  --muted:         #586170;            /* secondary text on light */
  --faint:         #8A92A1;            /* tertiary text / meta on light */

  /* Hairlines */
  --line:          rgba(20, 23, 28, 0.10);  /* hairline border on light */
  --line-2:        rgba(20, 23, 28, 0.06);  /* fainter hairline */

  /* Accents on dark */
  --on-dark:       #6FA0FF;            /* cobalt accent on dark (eyebrows, "Bid" wordmark, period accents) */
  --on-dark-mut:   rgba(255, 255, 255, 0.60);  /* secondary text on dark */

  /* "Approved" green */
  --go:            #157A52;            /* approved green */
  --go-tint:       rgba(21, 122, 82, 0.12);   /* green tint fill */
  --go-dark:       #5FD3A0;            /* green on dark */

  /* Amber (status accents in product mockups) */
  --amber:         #8A6110;
  --amber-tint:    rgba(185, 130, 27, 0.14);

  /* Body-text convenience roles (light vs. dark bands) */
  --text-on-light: var(--muted);
  --text-on-dark:  rgba(255, 255, 255, 0.66);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-sans:      'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:      'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-signature: 'Caveat', cursive;

  /* Heading tracking (tight) */
  --tracking-hero:     -0.04em;        /* hero H1 */
  --tracking-section:  -0.03em;        /* section titles */
  --tracking-wordmark: -0.035em;       /* logo wordmark */
  --tracking-eyebrow:   0.16em;        /* mono caps eyebrows */

  --leading-body: 1.5;

  /* ── Spacing / layout ───────────────────────────────────────── */
  --container-max: 1180px;             /* content max width */
  --gutter:        28px;               /* horizontal page padding */
  --section-pad:   clamp(64px, 8vw, 104px);  /* vertical section rhythm (hero/CTA override per section) */

  /* ── Radius ─────────────────────────────────────────────────── */
  --radius-pill:    999px;             /* buttons */
  --radius-card:    22px;              /* cards */
  --radius-tile:    12px;              /* feature / icon tiles (12–14px) */
  --radius-tile-lg: 14px;

  /* ── Shadow ─────────────────────────────────────────────────── */
  --shadow-card:     0 1px 2px rgba(20, 23, 28, 0.04), 0 10px 30px -16px rgba(20, 23, 28, 0.20);
  --shadow-primary:  0 8px 22px rgba(45, 107, 240, 0.30), 0 1px 2px rgba(20, 23, 28, 0.10);
  --shadow-elevated: 0 12px 30px rgba(20, 23, 28, 0.18);  /* lifted mark / floating card */

  /* ── Background textures (dark bands) ───────────────────────── */
  /* Dot field — consumed by A6's masked utility. */
  --dot-hero-color: rgba(255, 255, 255, 0.13);
  --dot-hero-size:  24px;
  --dot-cta-color:  rgba(255, 255, 255, 0.06);
  --dot-cta-size:   22px;
  /* Cobalt glow orb */
  --glow-color:     rgba(45, 107, 240, 0.30);
}