/* ============================================================
   UM CLIENT HUB — tokens.css
   The only file that defines a colour, radius, font or timing.
   Built on the UCHE MADUMERE design system: #141414 ground, one
   blue signal, no-fill cards with 2px borders, Oswald display.
   Dark is the brand default. Light is the same system inverted,
   because the client portal ships both and the site has to match
   whatever the client signed into.
   ============================================================ */

:root{
  /* ---- ground ---- */
  --site-black:#141414;
  --bg:#141414;
  --card-dark:#1E1E1E;
  --surface:#2C2C2C;

  /* ---- borders. 2px --border is THE card signature ---- */
  --border:#3A3A3A;
  --border-strong:#5A5A5A;
  --rule:#232323;
  --rule-dim:#1A1A1A;
  --border-card-width:2px;

  /* ---- text ---- */
  --fg:#FFFFFF;
  --fg-secondary:#AAAAAA;
  --fg-tertiary:#666666;

  /* ---- the one accent ---- */
  --accent:#00A3FF;
  /* amber: "over to you" / waiting. Needs a light-theme value for the same
     reason signal green does — the neon value is unreadable on white. */
  --warn:#F59E0B;
  --accent-ink:#FFFFFF;
  --accent-wash:rgba(0,163,255,.12);
  --accent-glow:0 0 80px rgba(0,163,255,.35);
  --accent-lift:0 8px 28px rgba(0,163,255,.28);
  --lift:0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.34);
  /* the ambient grid, same as the session doc: 56px lines, no gradient wash */
  --grid-line:rgba(255,255,255,.045);
  --grid-size:56px;
  --grid-mask:radial-gradient(ellipse 80% 70% at 60% 35%,#000 0%,transparent 80%);
  --signal-green:#39FF14;

  /* ---- fills that only exist where a fill is unavoidable ---- */
  --scrim:linear-gradient(180deg,transparent,rgba(20,20,20,.95));
  --glass:rgba(20,20,20,.78);
  --hairline-overlay:rgba(255,255,255,.06);

  /* ---- radii ---- */
  --radius-card:18px;
  --radius-lg:24px;
  --radius-pill:999px;
  --radius-small:8px;
  --radius-phone:40px;

  /* ---- type ---- */
  --font-display:'Oswald','Anton','Arial Narrow',sans-serif;
  --font-body:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --fs-hero:clamp(44px,5.6vw,88px);
  --fs-display:clamp(44px,6.2vw,88px);
  --fs-h2:clamp(32px,4.2vw,52px);
  --fs-h3:19px;
  --fs-card-title:20px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-meta:12px;
  --fs-label:11px;

  /* ---- motion ---- */
  --t-micro:140ms;
  --t-short:320ms;
  --t-medium:500ms;
  --t-standard:760ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.4,0,0,1);

  /* ---- rhythm ---- */
  --maxw:1240px;
  --pad:56px;
  --sec:110px;
}

html[data-theme="light"]{
  --site-black:#FFFFFF;
  --bg:#F7F9FC;
  --card-dark:#FFFFFF;
  --surface:#EEF2F7;
  --border:#DCE3EC;
  --border-strong:#0B1220;
  --rule:#E6EBF2;
  --rule-dim:#EFF3F8;
  --fg:#0B1017;
  --fg-secondary:#556173;
  --fg-tertiary:#8B93A3;
  --accent:#0072C6;
  --warn:#B25E02;
  --accent-wash:rgba(0,114,198,.09);
  --accent-glow:0 0 60px rgba(0,114,198,.18);
  --accent-lift:0 8px 28px rgba(0,114,198,.22);
  --lift:0 2px 5px rgba(10,20,40,.07), 0 12px 30px rgba(10,20,40,.10);
  --grid-line:rgba(15,23,42,.05);
  --scrim:linear-gradient(180deg,transparent,rgba(8,12,20,.88));
  --glass:rgba(255,255,255,.82);
  --hairline-overlay:rgba(10,20,40,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--fg)}
button{font-family:inherit;cursor:pointer;color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}

.um-container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.um-container.narrow{max-width:860px}
@media(max-width:720px){:root{--pad:24px;--sec:76px}}

/* ---- display + headings ---- */
.um-display{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;color:var(--fg)}
.um-h2{font-family:var(--font-body);font-weight:800;font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.02em;color:var(--fg);max-width:18ch}
.um-h3{font-family:var(--font-body);font-weight:700;font-size:var(--fs-h3);line-height:1.25;color:var(--fg)}
.accent{color:var(--accent)}
.um-body{color:var(--fg-secondary);font-size:var(--fs-body);line-height:1.6;max-width:56ch}
.um-body-sm{color:var(--fg-secondary);font-size:var(--fs-body-sm);line-height:1.55}
.um-meta{font-size:var(--fs-meta);color:var(--fg-tertiary);letter-spacing:.05em;font-weight:500}

/* ---- section label: 2px pill with the one glowing dot ---- */
.um-label{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);background:transparent;font-size:var(--fs-label);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-secondary);white-space:nowrap}

/* ---- card: no fill, 2px border, 18px radius ---- */
.um-card{background:transparent;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-card);padding:32px;transition:border-color var(--t-short) var(--ease-out)}
.um-card:hover{border-color:var(--border-strong)}

/* ---- one CTA, one style: solid blue, uppercase, tracked, pill ---- */
.um-btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--accent-ink);border:var(--border-card-width) solid var(--accent);padding:14px 28px;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:filter var(--t-short) var(--ease-out),transform var(--t-micro) var(--ease-snap)}
.um-btn-primary:hover{filter:brightness(1.1);color:var(--accent-ink)}
.um-btn-primary:active{transform:scale(.97)}
.um-btn-primary.lg{padding:18px 36px;font-size:15px}
.um-btn-primary .arw,.um-btn-ghost .arw{text-decoration:none;transition:transform var(--t-short) var(--ease-out)}
.um-btn-primary:hover .arw{transform:translateX(4px)}

.um-btn-ghost{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--fg);border:var(--border-card-width) solid var(--border);padding:12px 26px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:border-color var(--t-short) var(--ease-out),color var(--t-short) var(--ease-out)}
.um-btn-ghost:hover{border-color:var(--fg);color:var(--fg)}
.um-btn-ghost.sm{padding:10px 20px;font-size:12px}

/* ---- chip ---- */
.um-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border:var(--border-card-width) solid var(--border);border-radius:var(--radius-pill);background:transparent;font-size:13px;font-weight:600;color:var(--fg-secondary);white-space:nowrap}

/* ---- speed line: the brand's divider ---- */
.um-speed-line{display:block;width:100%;height:2px;background:var(--accent);border:0;opacity:.85}
.um-thin-rule{height:1px;background:var(--rule);border:0}

/* ---- the ambient grid field ---- */
.um-stripe{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);-webkit-mask-image:var(--grid-mask);mask-image:var(--grid-mask)}

/* ---- construction grid overlay ---- */
.um-grid-overlay{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,var(--hairline-overlay) 1px,transparent 1px),linear-gradient(to bottom,var(--hairline-overlay) 1px,transparent 1px);background-size:80px 80px}

.um-section{padding:var(--sec) 0;position:relative}

/* ---- the page's one reveal primitive: rises into place, staggered by JS ---- */
.rise{opacity:0;transform:translateY(22px);transition:opacity var(--t-standard) var(--ease-out),transform var(--t-standard) var(--ease-out)}
.rise.in{opacity:1;transform:none}
@keyframes um-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none;transition-delay:0ms!important}html{scroll-behavior:auto}}