/* DRAFTSPACE — typography */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,300..500&family=Inter+Tight:wght@300..800&family=JetBrains+Mono:wght@400;500;600&display=swap");

@layer draftspace.type {
  [data-system="draftspace"] {
    font-family: var(--ds-font-body);
    font-size: var(--ds-t-body);
    font-weight: 400;
    line-height: 1.55;
    color: var(--ds-fg-dim);
    background: var(--ds-bg);
    -webkit-font-smoothing: antialiased;
  }

  /* Display — Inter Tight, tight, max 3 lines */
  [data-system="draftspace"] .ds-display {
    font-family: var(--ds-font-display);
    font-size: var(--ds-t-display);
    font-weight: 600;
    font-variation-settings: "wght" 600;
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--ds-fg);
    margin: 0;
  }
  [data-system="draftspace"] .ds-display .accent { color: var(--ds-mint); }
  [data-system="draftspace"] .ds-display .dim    { color: var(--ds-fg-mute); }
  [data-system="draftspace"] .ds-display .strike {
    text-decoration: line-through;
    text-decoration-color: var(--ds-rule-dash);
    color: var(--ds-fg-mute);
  }

  [data-system="draftspace"] h1, [data-system="draftspace"] .ds-h1 {
    font-family: var(--ds-font-display);
    font-size: var(--ds-t-h1);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ds-fg);
    margin: 0;
  }
  [data-system="draftspace"] h2, [data-system="draftspace"] .ds-h2 {
    font-family: var(--ds-font-display);
    font-size: var(--ds-t-h2);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ds-fg);
    margin: 0;
  }
  [data-system="draftspace"] h3, [data-system="draftspace"] .ds-h3 {
    font-family: var(--ds-font-display);
    font-size: var(--ds-t-h3);
    font-weight: 600;
    color: var(--ds-fg);
    margin: 0;
  }

  [data-system="draftspace"] p, [data-system="draftspace"] .ds-body {
    font-family: var(--ds-font-body);
    font-size: var(--ds-t-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ds-fg-dim);
    margin: 0 0 1em;
  }

  /* Mono labels — the workhorse */
  [data-system="draftspace"] .ds-mono {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-t-mono);
    color: var(--ds-fg-dim);
  }
  [data-system="draftspace"] .ds-anno {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-t-anno);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ds-fg-mute);
  }
  [data-system="draftspace"] .ds-anno--mint   { color: var(--ds-mint); }
  [data-system="draftspace"] .ds-anno--violet { color: var(--ds-violet); }
  [data-system="draftspace"] .ds-anno--amber  { color: var(--ds-amber); }

  /* The serif margin voice — Fraunces italic, ONLY here */
  [data-system="draftspace"] .ds-margin-note {
    font-family: var(--ds-font-serif);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "wght" 400;
    font-size: var(--ds-t-margin);
    line-height: 1.4;
    color: var(--ds-fg-dim);
    letter-spacing: -0.005em;
  }

  [data-system="draftspace"] code,
  [data-system="draftspace"] kbd,
  [data-system="draftspace"] pre {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-t-small);
  }
  [data-system="draftspace"] :not(pre) > code {
    color: var(--ds-mint);
    background: var(--ds-mint-soft);
    padding: 1px 6px;
    border-radius: var(--ds-radius);
  }

  [data-system="draftspace"] a {
    color: var(--ds-fg);
    text-decoration: none;
    border-bottom: 1px dashed var(--ds-rule-dash);
    transition: all var(--ds-dur) var(--ds-easing);
  }
  [data-system="draftspace"] a:hover {
    color: var(--ds-mint);
    border-bottom: 1px solid var(--ds-mint);
  }
  [data-system="draftspace"] a:focus-visible {
    color: var(--ds-violet);
    border-bottom: 1px solid var(--ds-violet);
    outline: 0;
  }
}