/* DRAFTSPACE — design tokens (the design-mode IDE) */

@layer draftspace.tokens {
  :root,
  [data-system="draftspace"] {
    --ds-bg:         #0e1116;
    --ds-bg-2:       #161b22;
    --ds-bg-3:       #1f2630;
    --ds-fg:         #e6edf3;
    --ds-fg-dim:     #9da7b3;
    --ds-fg-mute:    #6b7480;
    --ds-rule:       #262d36;
    --ds-rule-dash:  #3a4250;

    --ds-mint:       #7df9c4;
    --ds-mint-soft:  rgba(125,249,196,0.08);
    --ds-mint-glow:  rgba(125,249,196,0.25);
    --ds-violet:     #c084fc;
    --ds-violet-soft:rgba(192,132,252,0.10);
    --ds-amber:      #fbb040;
    --ds-amber-soft: rgba(251,176,64,0.10);
    --ds-error:      #ff6b6b;
    --ds-blue:       #82aaff;
    --ds-pink:       #ff7b9c;

    /* Syntax */
    --syn-comment: var(--ds-fg-mute);
    --syn-keyword: var(--ds-violet);
    --syn-string:  var(--ds-mint);
    --syn-number:  var(--ds-amber);
    --syn-fn:      var(--ds-blue);
    --syn-tag:     var(--ds-pink);
    --syn-punct:   var(--ds-fg-dim);

    --ds-gradient: linear-gradient(135deg, #c084fc 0%, #7df9c4 100%);

    --ds-font-display: "Inter Tight", system-ui, sans-serif;
    --ds-font-body:    "Inter Tight", system-ui, sans-serif;
    --ds-font-mono:    "JetBrains Mono", ui-monospace, monospace;
    --ds-font-serif:   "Fraunces", Georgia, serif;

    --ds-t-display: 64px;
    --ds-t-h1:      36px;
    --ds-t-h2:      24px;
    --ds-t-h3:      18px;
    --ds-t-body:    15px;
    --ds-t-small:   13px;
    --ds-t-mono:    12px;
    --ds-t-anno:    10px;
    --ds-t-margin:  16px;

    --ds-s-1: 4px;
    --ds-s-2: 8px;
    --ds-s-3: 12px;
    --ds-s-4: 16px;
    --ds-s-5: 24px;
    --ds-s-6: 32px;
    --ds-s-7: 48px;

    --ds-radius: 2px;
    --ds-radius-pill: 999px;

    --ds-bar-top: 36px;
    --ds-bar-status: 24px;
    --ds-rail: 220px;

    /* Wireframe grid (carryover from VELLUM, retuned to bg) */
    --ds-grid-bg:
      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    --ds-grid-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;

    --ds-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ds-dur:    150ms;
  }
}