/* Preserved from the supplied Umbra Assets Page, 13 October 2026. */

/* Assets page (/token-list/), from Paper “Umbra · Assets page · Desktop 1920”.
   Colours are the design's own values; all type is FT Aktual Book 450, with a
   system monospace stack where the design uses JetBrains Mono (not bundled). */
.token-page{
  --token-text:#000829;--token-secondary:#636A6B;--token-muted:#8C9294;--token-placeholder:#6C7273BF;
  --token-surface:#F1F2F2;--token-border:#EAEBEB;--token-border-strong:#DDDEDE;
  --token-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding-top:64px;padding-bottom:96px;color:var(--token-text);font-weight:var(--weight-emphasis);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)
}
/* Above 900px the page sits in columns 3–10, like the blog; inside, 8 columns on the same tracks. */
.token-inner{grid-column:3/11;min-width:0}
.token-page h1,.token-page h2,.token-page p{font-weight:inherit;margin:0}

.token-hero{display:flex;flex-direction:column;gap:24px;padding-bottom:64px}
.token-hero h1{font-size:var(--type-h1);line-height:92px;letter-spacing:-.035em;color:var(--token-text)}
.token-hero p{font-size:20px;line-height:30px;letter-spacing:-.01em;color:var(--token-secondary)}


.token-table{width:100%;border-collapse:collapse;table-layout:fixed}
.token-col-type{width:200px}
.token-table th,.token-table td{padding:0;text-align:left;font-weight:inherit;vertical-align:middle}
.token-table thead th{height:44px;border-bottom:1px solid var(--token-border-strong);color:var(--token-muted);font:12px/16px var(--token-mono);letter-spacing:.04em;text-transform:uppercase}
.token-table tbody tr{height:72px;border-bottom:1px solid var(--token-border)}
.token-asset{display:flex;align-items:center;gap:16px;min-width:0;padding-right:24px}
.token-logo{flex-shrink:0;width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--token-surface)}
.token-logo-empty{display:grid;place-items:center;color:var(--token-secondary);font-size:14px;line-height:1}
.token-name{min-width:0;font-size:16px;line-height:22px;letter-spacing:-.01em;color:var(--token-text)}
.token-type-inline{display:none}
.token-type-cell{font-size:14px;line-height:18px;color:var(--token-secondary)}
.token-empty{padding:40px 0!important;font-size:14px;color:var(--token-secondary)}

.token-disclaimer{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--gap);padding-top:40px}
.token-disclaimer h2{grid-column:1/3;color:var(--token-muted);font:12px/16px var(--token-mono);letter-spacing:.04em;text-transform:uppercase}
.token-disclaimer>div{grid-column:3/9;display:flex;flex-direction:column;gap:12px}
.token-disclaimer p{font-size:14px;line-height:22px;color:var(--token-secondary)}

@media(max-width:900px){
  .token-col-type{width:150px}
  .token-inner{grid-column:1/-1}
  .token-disclaimer{display:flex;flex-direction:column;gap:16px}
}
@media(max-width:620px){
  .token-hero h1{font-size:56px;line-height:60px}
  .token-hero p{font-size:16px;line-height:24px}
    .token-table{table-layout:auto}
  .token-col-type{width:auto}
  .token-type-cell{display:none}
  .token-asset{gap:12px;padding-right:12px}
  .token-name{font-size:15px;line-height:20px}
  .token-type-inline{display:block;margin-top:2px;font-size:12px;line-height:16px;letter-spacing:0;color:var(--token-secondary)}
}


/* Shared shell is fixed; keep the supplied page clear of the navbar. */
.token-page{padding-top:64px}
.token-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){.token-page{padding-top:40px}}