/* ============================================================
   TRAZO — DESIGN TOKENS  ·  dark · luxurious · aspirational
   ============================================================ */
:root{
  /* ---- palette ---- */
  --obsidian:#080A0E;     /* page background — cool near-black */
  --coal:#0C0F15;         /* deep alternating sections */
  --surface:#10141C;      /* raised panels / cards */
  --surface-2:#171D28;    /* hover / insets */
  --line:#222836;         /* hairline borders */
  --line-soft:rgba(230,238,247,.08);

  --gold:#7096D1;         /* primary accent — Universe periwinkle blue */
  --gold-bright:#A6C3EC;  /* luminous accent — glowing line core, highlights */
  --gold-deep:#47649C;    /* shadowed / pressed accent */
  --gold-tint:rgba(112,150,209,.14);

  --ivory:#EEF1F7;        /* primary text — cool white */
  --ash:#97A2B5;          /* secondary text */
  --ash-dim:#616B7D;      /* muted labels / meta */
  --skin:#8FA6C4;         /* soft body-tone accent (rare) */

  /* ---- type ---- */
  --serif:'Italiana', Georgia, 'Times New Roman', serif;   /* display */
  --sans:'Jost', system-ui, -apple-system, sans-serif;        /* UI / body */

  --fs-display:clamp(4rem, 2rem + 11vw, 11rem);
  --fs-h1:clamp(2.6rem, 1.6rem + 4vw, 5rem);
  --fs-h2:clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  --fs-h3:clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  --fs-lead:clamp(1.05rem, 1rem + .35vw, 1.3rem);
  --fs-body:1.02rem;
  --fs-small:.9rem;
  --fs-eyebrow:.72rem;

  --lh-tight:.94;
  --lh-head:1.12;
  --lh-body:1.75;
  --ls-eyebrow:.3em;
  --ls-label:.22em;

  /* ---- spacing / layout ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --gutter:clamp(1.5rem, .8rem + 3vw, 4rem);
  --maxw:1320px;
  --section-y:clamp(4.5rem, 3rem + 8vw, 9rem);

  /* ---- radius / motion ---- */
  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-full:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-line:cubic-bezier(.7,0,.2,1);
  --dur:.5s; --dur-slow:.9s;

  /* the gold line gradient + glow */
  --line-grad:linear-gradient(90deg,transparent,var(--gold-deep) 12%,var(--gold-bright) 50%,var(--gold) 80%,transparent);
  --glow:0 0 14px 1px rgba(112,150,209,.45);
}
@media (prefers-reduced-motion: reduce){ :root{ --dur:.001s; --dur-slow:.001s; } }