/* =========================================================================
   tokens.css — TAXai design tokens (SINGLE SOURCE OF TRUTH for the look).
   Owned by the taxai-brand (hub) project. Linked by every page, hub + spokes.

   Change the palette / texture / overlays HERE and the whole site updates.
   - Brown / amber brand palette
   - Background texture + overlay gradients
   - Shared "card hub" components (.wrap/.card/.lock/.section-label/.row/.home)
   ========================================================================= */

:root {
  /* --- warm brown / amber brand palette (constant; used by always-dark pages) --- */
  --brand-bg:        #111312;
  --brand-panel:     #1c1f1d;
  --brand-panel-2:   #262a27;
  --brand-line:      #3a3f3b;
  --brand-ink:       #ecebe6;
  --brand-ink-muted: #a8a89f;
  --brand-ink-faint: #76776e;
  --brand-accent:    #d8975a;
  --brand-accent-2:  #efbd83;
  --brand-gold:      #cbb26b;

  /* --- light "document" surfaces (training / photography / linkedin) --- */
  --doc-bg:        #fafaf7;
  --doc-surface:   #ffffff;
  --doc-surface-2: #f3f3ee;
  --doc-border:    #e3e2dc;
  --doc-text:      #1c1c1a;
  --doc-text-muted:#5b5b56;
  --doc-accent:    #9a6a30;
  --doc-accent-2:  #7a5020;

  /* --- background texture + overlay tints (warm, lighter = more texture) --- */
  --texture:        url("/bg-texture.jpg?v=3");
  --overlay-soft:   linear-gradient(rgba(14,16,15,.50), rgba(14,16,15,.68));
  --overlay-strong: linear-gradient(rgba(14,16,15,.50), rgba(14,16,15,.68));
  --overlay-digest: linear-gradient(rgba(14,16,15,.50), rgba(14,16,15,.68));
  --overlay-brief:  linear-gradient(rgba(8,9,9,.74), rgba(8,9,9,.84));
}

/* In dark mode, the light document surfaces flip to the warm dark palette. */
@media (prefers-color-scheme: dark) {
  :root {
    --doc-bg:        var(--brand-bg);
    --doc-surface:   var(--brand-panel);
    --doc-surface-2: var(--brand-panel-2);
    --doc-border:    var(--brand-line);
    --doc-text:      #ececea;
    --doc-text-muted:#9b9a93;
    --doc-accent:    var(--brand-accent);
    --doc-accent-2:  var(--brand-accent-2);
  }
}

/* Reusable textured page background (always-dark pages add class="bg-textured"). */
.bg-textured {
  background: var(--brand-bg);
  background-image: var(--overlay-strong), var(--texture);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* =========================================================================
   Shared "card hub" components — used by /private/ and /private/investments/.
   Class names below are not used by the light document theme, so they are safe
   to define globally.
   ========================================================================= */
.wrap { width: 100%; max-width: 560px; margin: 0 auto; }
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.top h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--brand-ink); }
.lock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--brand-gold);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  padding: 3px 10px; border-radius: 999px;
}
.lead { color: var(--brand-ink-muted); font-size: 14px; margin: 8px 0 28px; }
.section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-ink-faint); margin: 26px 0 12px;
}
a.card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  text-decoration: none; color: var(--brand-ink); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 16px 20px; margin-bottom: 10px;
  transition: background .15s, border-color .15s;
}
a.card:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
a.card.hero { background: rgba(205,162,94,.16); border-color: rgba(205,162,94,.45); padding: 20px; }
a.card.hero:hover { background: rgba(205,162,94,.24); }
.card .t { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.card .d { display: block; font-size: 13px; color: var(--brand-ink-muted); margin-top: 4px; }
.card .arrow { color: var(--brand-ink-muted); font-size: 18px; flex: none; }
.rows { display: flex; flex-direction: column; }
a.row {
  display: flex; align-items: center; justify-content: space-between;
  text-decoration: none; color: var(--brand-ink-muted); font-size: 14px;
  padding: 11px 14px; border-radius: 10px; border: 1px solid transparent; transition: background .12s;
}
a.row:hover { background: rgba(255,255,255,.06); color: var(--brand-ink); }
a.row .arrow { color: var(--brand-ink-faint); font-size: 15px; }
.home { display: inline-block; margin-top: 26px; color: var(--brand-ink-muted); text-decoration: none; font-size: 13px; }
.home:hover { color: var(--brand-ink); }