/* saassite.dev · phosphor design system — tokens + type roles
   Mirror of the Paper file tokens. One system, two mix ratios:
   marketing = mono + silkscreen + vt323 · blog = same chrome + sans prose */

:root {
  --color-bg: #080B08;
  --color-surface: #0D120E;
  --color-line: #1E3A22;
  --color-dim: #2F7A3C;
  --color-muted: #6FA377;
  --color-secondary: #9CC6A2;
  --color-body: #D8E6DA;
  --color-bright: #DFF7E2;
  --color-accent: #5BF870;
  --color-warn: #F0B429;

  --font-display: "VT323", monospace;
  --font-label: "Silkscreen", monospace;
  --font-mono: "IBM Plex Mono", monospace;
  --font-sans: "IBM Plex Sans", sans-serif;

  --text-label-xs: 10px;   --leading-label-xs: 12px;
  --text-label: 12px;      --leading-label: 16px;
  --text-mono-sm: 13px;    --leading-mono-sm: 16px;
  --text-sm: 15px;         --leading-sm: 25px;
  --text-body: 19px;       --leading-body: 34px;
  --text-lead: 21px;       --leading-lead: 33px;
  --text-logo: 22px;       --leading-logo: 28px;
  --text-stat: 34px;       --leading-stat: 42px;
  --text-heading: 40px;    --leading-heading: 38px;
  --text-display-lg: 66px; --leading-display-lg: 60px;
  --text-display-xl: 76px; --leading-display-xl: 68px;

  --tracking-display: -0.01em;
  --tracking-label: 0.1em;
  --tracking-label-xs: 0.12em;
  --tracking-command: 0.2em;

  --container-prose: 680px;
  --container-page: 1440px;
}

/* type roles */
.type-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); line-height: var(--leading-display-xl); letter-spacing: var(--tracking-display); font-weight: 400; }
.type-display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); line-height: var(--leading-display-lg); letter-spacing: var(--tracking-display); font-weight: 400; }
.type-heading    { font-family: var(--font-display); font-size: var(--text-heading); line-height: var(--leading-heading); font-weight: 400; }
.type-stat       { font-family: var(--font-display); font-size: var(--text-stat); line-height: var(--leading-stat); font-weight: 400; }
.type-lead       { font-family: var(--font-sans); font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: 400; }
.type-quote      { font-family: var(--font-sans); font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: 500; }
.type-body       { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); font-weight: 400; }
.type-sm         { font-size: var(--text-sm); line-height: var(--leading-sm); }
.type-mono-sm    { font-family: var(--font-mono); font-size: var(--text-mono-sm); line-height: var(--leading-mono-sm); }
.type-label      { font-family: var(--font-label); font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.type-label-xs   { font-family: var(--font-label); font-size: var(--text-label-xs); line-height: var(--leading-label-xs); letter-spacing: var(--tracking-label-xs); text-transform: uppercase; }
.type-logo       { font-family: var(--font-label); font-size: var(--text-logo); line-height: var(--leading-logo); }

/* base */
* { margin: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { background: var(--color-bg); color: var(--color-body); min-width: var(--container-page); }
a { color: inherit; }

/* shared chrome — mockups mirror the fixed 1440px Paper artboards */
.page { width: var(--container-page); margin-left: auto; margin-right: auto; padding: 0 88px 72px; }
.site-header { width: var(--container-page); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 26px 88px; border-bottom: 1px solid var(--color-line); }
.site-header .left { display: flex; align-items: center; gap: 32px; }
.site-header nav { display: flex; gap: 32px; }
.site-header nav a { font-family: var(--font-mono); font-size: var(--text-mono-sm); line-height: var(--leading-mono-sm); color: var(--color-secondary); text-decoration: none; }
.logo { color: var(--color-accent); text-decoration: none; }
.logo .tld { color: var(--color-dim); }
.hr { border: 0; border-top: 1px solid var(--color-line); }
.accent { color: var(--color-accent); }
.warn { color: var(--color-warn); }
.dim { color: var(--color-dim); }
.muted { color: var(--color-muted); }
.secondary { color: var(--color-secondary); }
.bright { color: var(--color-bright); }

/* swatch footer */
.swatch-row { display: flex; align-items: center; gap: 64px; padding: 44px 0; }
.swatches { display: flex; gap: 24px; }
.swatch { display: flex; flex-direction: column; gap: 8px; }
.swatch .chip { width: 94px; height: 56px; }
.font-list { display: flex; flex-direction: column; gap: 8px; }