/* =============================================================
   PROMPTA STUDIO · DESIGN TOKENS · v1.0
   Import into any HTML: <link rel="stylesheet" href="tokens.css">
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* ── Primary palette ────────────────────────────────────── */
  --ps-ink:        #0E0D0B;   /* type, ink mode bg */
  --ps-bone:       #F2ECDF;   /* paper, default bg */
  --ps-paper:      #EDE6D6;   /* darker cream */
  --ps-cream:      #F7F2E7;   /* lightest cream */
  --ps-oxblood:    #5A1A1F;   /* primary accent — one per composition */
  --ps-oxblood-deep:#3B0E12;

  /* ── Secondary jewels (one per composition, never combined) ── */
  --ps-umber:      #C8502B;
  --ps-forest:     #1E3A2F;
  --ps-ink-blue:   #1F2F5A;

  /* ── Digital-only acid ─────────────────────────────────── */
  --ps-volt:       #E8FF3A;

  /* ── Ink alphas (for rules, muted text, hairlines) ─────── */
  --ps-ink-55: rgba(14,13,11,.55);
  --ps-ink-30: rgba(14,13,11,.30);
  --ps-ink-15: rgba(14,13,11,.15);
  --ps-ink-08: rgba(14,13,11,.08);
  --ps-rule:   rgba(14,13,11,.22);

  /* ── Typography ────────────────────────────────────────── */
  --ps-f-display: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ps-f-body:    "IBM Plex Mono",  ui-monospace, Menlo, monospace;

  /* Scale · base 16px · 1.25 ratio */
  --ps-t-micro:   11px;
  --ps-t-small:   13px;
  --ps-t-body:    16px;
  --ps-t-lead:    20px;
  --ps-t-h3:      32px;
  --ps-t-h2:      56px;
  --ps-t-h1:      96px;
  --ps-t-display: 142px;
  --ps-t-hero:    220px;

  /* Tracking */
  --ps-track-display: -0.05em;
  --ps-track-body:     0;
  --ps-track-upper:    0.12em;

  /* Leading */
  --ps-lead-tight:  0.95;
  --ps-lead-body:   1.55;
  --ps-lead-micro:  1.7;

  /* ── Spacing & layout ──────────────────────────────────── */
  --ps-canvas-w: 1920px;
  --ps-canvas-h: 1080px;
  --ps-margin:   56px;
  --ps-gutter:   24px;
  --ps-baseline:  8px;
  --ps-cols:     12;

  /* ── Radii (we almost never use radius; 0 is the default) ── */
  --ps-radius-0:  0;
  --ps-radius-sm: 2px;   /* rare — only for fine keyboard chips, etc. */

  /* ── Motion ────────────────────────────────────────────── */
  --ps-ease:       cubic-bezier(.2,.8,.2,1);
  --ps-cursor-dur: 1.05s;
}

/* ── Base ─────────────────────────────────────────────── */
.ps-reset{ margin:0; padding:0; box-sizing:border-box; }
.ps-body-default{
  background: var(--ps-bone);
  color: var(--ps-ink);
  font-family: var(--ps-f-body);
  font-size: var(--ps-t-body);
}

/* ── Canonical text styles ────────────────────────────── */
.ps-hero     { font-family:var(--ps-f-display); font-weight:500; font-size:var(--ps-t-hero);    line-height:.88; letter-spacing:-.06em; }
.ps-display  { font-family:var(--ps-f-display); font-weight:500; font-size:var(--ps-t-display); line-height:.95; letter-spacing:var(--ps-track-display); }
.ps-h1       { font-family:var(--ps-f-display); font-weight:500; font-size:var(--ps-t-h1);      line-height:.92; letter-spacing:-.05em; }
.ps-h2       { font-family:var(--ps-f-display); font-weight:500; font-size:var(--ps-t-h2);      line-height:.98; letter-spacing:-.04em; }
.ps-h3       { font-family:var(--ps-f-display); font-weight:500; font-size:var(--ps-t-h3);      line-height:1.05; letter-spacing:-.03em; }
.ps-lead     { font-family:var(--ps-f-body);    font-size:var(--ps-t-lead); line-height:var(--ps-lead-body); }
.ps-body     { font-family:var(--ps-f-body);    font-size:var(--ps-t-body); line-height:var(--ps-lead-body); }
.ps-small    { font-family:var(--ps-f-display); font-size:var(--ps-t-small); letter-spacing:.06em; text-transform:uppercase; color:var(--ps-ink-55); }
.ps-micro    { font-family:var(--ps-f-display); font-size:var(--ps-t-micro); letter-spacing:var(--ps-track-upper); text-transform:uppercase; color:var(--ps-ink-55); }
.ps-eyebrow  { font-family:var(--ps-f-display); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ps-oxblood); }

/* ── Prompt cursor (blinking caret) ───────────────────── */
.ps-cursor{
  display:inline-block;
  width:.55em; height:1em;
  background:currentColor;
  vertical-align:-.14em;
  margin-left:.12em;
  animation: ps-blink var(--ps-cursor-dur) steps(2,start) infinite;
}
@keyframes ps-blink { to { visibility:hidden; } }

/* ── Placeholder image (use instead of stock/AI art) ──── */
.ps-placeholder{
  position:relative;
  background:
    repeating-linear-gradient(135deg, var(--ps-ink-08) 0 10px, transparent 10px 20px),
    var(--ps-paper);
  border:1px solid var(--ps-rule);
  display:flex; align-items:center; justify-content:center;
  color:var(--ps-ink-55); font-family:var(--ps-f-display);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}