/* Design system documentation page — built entirely on tokens.css */
*{box-sizing:border-box;}
html,body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family-base);}
body{padding:var(--space-48) var(--space-24) var(--space-100);max-width:1100px;margin:0 auto;}
a{color:var(--color-text);}
code{font-size:0.92em;background:var(--color-glass-strong);padding:var(--space-1) var(--space-5);border-radius:var(--radius-4);}

.ds-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-24);
  padding-bottom:var(--space-24);border-bottom:var(--border-width-1) solid var(--color-line);margin-bottom:var(--space-36);}
.ds-eyebrow{margin:0 0 var(--space-6);font-size:var(--font-size-11);text-transform:uppercase;letter-spacing:var(--letter-spacing-1-5);color:var(--color-muted);}
.ds-header h1{margin:0;font-size:var(--font-size-24);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-0-5);}
.ds-lede{margin:var(--space-10) 0 0;font-size:var(--font-size-13);color:var(--color-muted);line-height:var(--line-height-1-6);}
.ds-nav{display:flex;gap:var(--space-8);flex-wrap:wrap;}
.ds-nav a{font-size:var(--font-size-12);text-decoration:none;border:var(--border-width-1) solid var(--color-line);
  border-radius:var(--radius-20);padding:var(--space-6) var(--space-12);transition:background var(--duration-fast);}
.ds-nav a:hover{background:var(--color-glass-hover);border-color:var(--color-line-strong);}
.ds-muted{color:var(--color-muted);}

.ds-section{margin-bottom:var(--space-48);}
.ds-section h2{font-size:var(--font-size-11);text-transform:uppercase;letter-spacing:var(--letter-spacing-1-5);
  font-weight:var(--font-weight-regular);color:var(--color-muted);margin:0 0 var(--space-16);}

.ds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-12);}
.ds-list{display:flex;flex-direction:column;gap:var(--space-6);}

.ds-token{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:var(--space-8);
  background:var(--color-glass);border:var(--border-width-1) solid var(--color-line);border-radius:var(--radius-14);
  padding:var(--space-12);transition:border-color var(--duration-fast), background var(--duration-fast);}
.ds-token:hover,.ds-token:focus-visible{border-color:var(--color-line-strong);background:var(--color-glass-strong);}
.ds-list .ds-token{flex-direction:row;align-items:center;gap:var(--space-16);border-radius:var(--radius-10);}

.ds-name{font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);font-family:ui-monospace,Menlo,Consolas,monospace;}
.ds-value{font-size:var(--font-size-11);color:var(--color-muted);font-variant-numeric:tabular-nums;word-break:break-all;}
.ds-desc{font-size:var(--font-size-11);color:var(--color-subtle);line-height:var(--line-height-1-5);}
.ds-meta{display:flex;flex-direction:column;gap:var(--space-2);min-width:180px;}

/* previews */
.ds-swatch{height:72px;border-radius:var(--radius-8);border:var(--border-width-1) solid var(--color-line);
  background-image:linear-gradient(45deg,#222 25%,transparent 25%),linear-gradient(-45deg,#222 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#222 75%),linear-gradient(-45deg,transparent 75%,#222 75%);
  background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;position:relative;overflow:hidden;}
.ds-swatch > span{position:absolute;inset:0;}
.ds-type-sample{flex:1;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ds-bar{height:12px;background:var(--color-accent);border-radius:var(--radius-3);min-width:1px;}
.ds-bar-track{flex:1;}
.ds-radius{width:64px;height:64px;border:var(--border-width-1-5) solid var(--color-line-strong);background:var(--color-glass-strong);}
.ds-shadow{height:72px;border-radius:var(--radius-18);background:var(--color-glass);border:var(--border-width-1) solid var(--color-line);margin:var(--space-10);}

#ds-toast{position:fixed;bottom:var(--space-24);left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--color-white);color:var(--color-bg);font-size:var(--font-size-12);font-weight:var(--font-weight-semibold);
  padding:var(--space-8) var(--space-14);border-radius:var(--radius-20);transition:opacity var(--duration-base), transform var(--duration-base);pointer-events:none;}
#ds-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}