/* ====================================================================
   TRINITY INTELLIGENCE NETWORK — DESIGN SYSTEM
   Paper + Ink + Gold + Forest Green · matches Trinity Leads marketplace
   (token names like --ocean-* / --teal are legacy; values are paper/gold/green)
   Load this on every page: <link rel="stylesheet" href="/css/trinity-system.css">
   ==================================================================== */

:root {
  /* Surfaces — Trinity Leads palette: Paper + Ink + Gold + Forest Green */
  --bg: #fafaf7;            /* warm paper — primary background */
  --bg-2: #f4f3ee;          /* light warm panel (surface-2) */
  --bg-3: #ecebe4;          /* deeper panel */
  --bg-4: #e2e0d6;          /* line / divider tint */
  --bg-card: #ffffff;       /* white card */
  --bg-elev: #fafaf7;       /* lightest panel */
  --bg-dark: #0a0a0c;       /* ink — footer + dark sections */
  --bg-darker: #050506;

  /* Hero gradient stops (paper → white, gold warmth) */
  --ocean-sky: #ffffff;     /* white */
  --ocean-surface: #fafaf7; /* paper */
  --ocean-mid: #f4f3ee;     /* panel */
  --ocean-deep: #c89b4a;    /* gold warmth */
  --ocean-trench: #0a0a0c;
  --ocean-foam: #ffffff;
  --sand-wet: #f4f3ee;
  --sand-dry: #fafaf7;
  --sand-deep: #ecebe4;

  /* Typography colors — ink on paper */
  --text: #0a0a0c;          /* ink near-black */
  --text-2: #3a3a3c;        /* dark */
  --text-3: #7a7a7a;        /* muted */
  --text-mute: #9ca3af;     /* faint */
  --text-faint: #c8c8c2;
  --text-on-dark: #fafaf7;
  --text-on-dark-2: #c89b4a;

  /* Signature accent — gold */
  --acc: #c89b4a;            /* gold */
  --acc-bright: #d8af63;     /* brighter gold (hovers / dark bg) */
  --acc-deep: #9a7536;       /* deep gold */
  --acc-soft: rgba(200,155,74,0.12);
  --acc-line: rgba(200,155,74,0.30);
  --acc-strong: rgba(200,155,74,0.5);

  /* Secondary brand — deep forest green (verified/trust moments) */
  --coral: #0a4d3c;          /* forest green — energy/trust moments */
  --coral-soft: rgba(10,77,60,0.10);
  --gold: #c89b4a;           /* gold accent */
  --gold-soft: rgba(200,155,74,0.12);
  --teal: #0a4d3c;           /* forest green — positive data */
  --teal-soft: rgba(10,77,60,0.10);

  /* Borders + lines (ink-tinted) */
  --border: rgba(10,10,12,0.10);
  --border-2: rgba(10,10,12,0.18);
  --border-3: rgba(10,10,12,0.26);
  --border-strong: rgba(10,10,12,0.38);

  /* States */
  --pos: #1a6d54;
  --neg: #b03030;
  --warn: #c89b4a;

  /* Typography stack */
  --f-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-serif: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Radii */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-2xl: 24px;

  /* Shadow system — 3-layer "lifted off the sand" depth.
     Each shadow combines: contact (sharp close shadow) + lift (medium spread) + atmosphere (soft long shadow).
     Coffee-tinted to harmonize with the warm sand background. */
  --shadow-sm:
    0 1px 2px rgba(10,10,12,0.07),
    0 2px 6px rgba(10,10,12,0.05);
  --shadow:
    0 1px 2px rgba(10,10,12,0.08),
    0 6px 14px rgba(10,10,12,0.08),
    0 20px 40px rgba(10,10,12,0.06);
  --shadow-lg:
    0 2px 4px rgba(10,10,12,0.10),
    0 12px 24px rgba(10,10,12,0.10),
    0 30px 60px rgba(10,10,12,0.08);
  --shadow-xl:
    0 4px 8px rgba(10,10,12,0.12),
    0 20px 40px rgba(10,10,12,0.12),
    0 48px 96px rgba(10,10,12,0.10);
  --shadow-acc:
    0 2px 4px rgba(200,155,74,0.12),
    0 8px 20px rgba(200,155,74,0.22),
    0 24px 48px rgba(200,155,74,0.16);
  --shadow-inset:
    inset 0 1px 2px rgba(10,10,12,0.06),
    inset 0 2px 4px rgba(10,10,12,0.04);
  --shadow-glow:
    0 0 0 1px rgba(255,255,255,0.5) inset,
    0 1px 2px rgba(10,10,12,0.06),
    0 8px 24px rgba(10,10,12,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::before, *::after { box-sizing: border-box; }
html {
  font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  background: var(--bg);
  overflow-x: hidden;
}
body {
  font-family: var(--f-body); background: var(--bg); color: var(--text);
  line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
  width: 100%;
  /* No body-level safe-area padding — it left paper strips around full-bleed
     dark sections on notched iPhones. Safe areas are handled per-component
     (fixed nav padding-top, footer padding-bottom). */
}
a { color: inherit; text-decoration: none; transition: color 160ms ease; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: var(--acc); color: #fff; }

/* Skip link */
.skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto; margin: 0;
  clip: auto; clip-path: none; padding: 12px 20px; background: var(--acc); color: #fff;
  z-index: 9999; border-radius: var(--r); white-space: normal; font-weight: 600;
}

/* Layout primitives */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

/* Reusable button system */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  border-radius: var(--r); cursor: pointer; border: 1px solid transparent;
  transition: all 160ms ease; min-height: 48px; font-family: var(--f-body);
  text-decoration: none;
}
.btn-primary { background: var(--acc); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--acc-bright); transform: translateY(-1px); box-shadow: var(--shadow-acc); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.btn-quiet { background: transparent; color: var(--text-2); padding: 14px 18px; }
.btn-quiet:hover { color: var(--acc); }
.btn-coral { background: var(--coral); color: #fff; box-shadow: var(--shadow-sm); }
.btn-coral:hover { background: #1a6d54; transform: translateY(-1px); }
.btn .arrow { transition: transform 160ms ease; }
.btn:hover .arrow { transform: translateX(3px); }