/* doesitfit.lol — design system (from the "UI guidelines v0.1" board in Claude Design)
 *
 * A fitting room for websites. The chrome is a tailor's shop: cream paper, ink outlines,
 * tape-measure yellow. The user's site is the only thing in colour that isn't ours.
 *
 * Rules worth remembering:
 *  - Colour is spent only on actions and verdicts. Chrome stays ink + cream.
 *  - Borders are 2px ink everywhere; 3px only on device frames.
 *  - Shadows are hard (no blur, ever): 4px controls, 6px hero + frames, 2px stamps.
 *  - Pressed = the element slides into its shadow.
 *  - Numbers are real pixels, set in mono. Never decorative, never animated.
 *  - One primary (tomato) action per screen. Ink text on tomato, never white.
 *  - Touch targets ≥ 44px.
 */

:root {
  /* colour */
  --cream: #F4EFE3;      /* page ground, canvas */
  --paper: #FFFDF7;      /* frames, inputs, cards, bars */
  --ink: #16130F;        /* text, every border, every shadow */
  --tomato: #FF5A1F;     /* primary action, SPILLING — ink text on it */
  --blue: #2F5BFF;       /* FITS, focus ring, link hover — white text OK */
  --tape: #FFD23F;       /* TIGHT, highlights, the ruler */
  --tomato-ink: #D23C06; /* orange text on cream, 24px+ only (the .lol) */
  --graphite: #6B6459;   /* captions, dimensions, hints */
  --dust: #CFC6B4;       /* skeletons, dividers — never text */
  --sand: #E9E1D0;       /* skeleton blocks */

  /* type */
  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* shape */
  --line: 2px solid var(--ink);
  --line-frame: 3px solid var(--ink);
  --r: 12px;          /* controls */
  --r-frame: 18px;    /* device frames (16–22) */
  --r-pill: 999px;    /* device chips */
  --shadow: 4px 4px 0 var(--ink);
  --shadow-hero: 6px 6px 0 var(--ink);
  --shadow-stamp: 2px 2px 0 var(--ink);

  /* space: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* patterns */
  --hatch: repeating-linear-gradient(-45deg, var(--tomato) 0 6px, var(--ink) 6px 8px);
  --dots: radial-gradient(circle, rgba(22, 19, 15, 0.18) 1.2px, transparent 1.6px) 0 0 / 22px 22px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
a:hover { color: var(--blue); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ type scale */
.t-display { font: 800 104px/0.92 var(--font-display); letter-spacing: -0.045em; margin: 0; }
.t-h2 { font: 800 40px/1.05 var(--font-display); letter-spacing: -0.03em; margin: 0; }
.t-body-l { font-size: 20px; line-height: 1.5; margin: 0; text-wrap: pretty; }
.t-caps { font: 600 13px/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.t-measure { font: 600 12px/1.3 var(--font-mono); color: var(--graphite); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ logo */
.logo {
  font: 800 28px/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo span { color: var(--tomato-ink); }
.logo:hover { color: var(--ink); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 46px; padding: 0 20px;
  background: var(--paper); color: var(--ink);
  border: var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  font-weight: 600; font-size: 16px; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
}
.btn:hover { color: var(--ink); }
.btn:active:not(:disabled), .btn.is-pressed { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--tomato); font-weight: 700; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; padding: 0 16px; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost:active:not(:disabled) { transform: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--cream); color: var(--graphite); border: 2px dashed var(--graphite); box-shadow: none; cursor: not-allowed;
}
.btn-sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn-icon { width: 46px; padding: 0; }
.btn-icon.btn-sm { width: 44px; }
/* toggle buttons (Rotate, Sync scroll…): paper when off, solid ink when on */
.btn-toggle { box-shadow: none; }
.btn-toggle:active:not(:disabled) { transform: none; } /* no shadow to slide into */
.btn-toggle[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.btn svg { flex: none; }

/* ------------------------------------------------------------------ URL field */
.field {
  display: flex; align-items: stretch; height: 46px; min-width: 0;
  background: var(--cream); border: var(--line); border-radius: var(--r); overflow: hidden;
  transition: background 80ms;
}
.field:focus-within { background: var(--paper); outline: 3px solid var(--blue); outline-offset: 0; }
.field-label {
  display: flex; align-items: center; padding: 0 12px; flex: none;
  font: 700 12px/1 var(--font-mono); letter-spacing: 0.04em;
  background: var(--tape); border-right: var(--line);
}
.field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px;
  font: 400 15px/1 var(--font-mono); color: var(--ink);
}
.field input::placeholder { color: var(--graphite); }
.field-btn {
  flex: none; width: 46px; border: 0; border-left: var(--line); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.field-btn:hover { background: var(--cream); }
.field-btn:focus-visible { outline-offset: -4px; }

/* ------------------------------------------------------------------ device chips (on = solid ink, off = dashed hanger) */
.chip {
  display: inline-flex; align-items: center; gap: var(--s2); flex: none;
  height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); border: 2px dashed var(--ink);
  font-weight: 600; font-size: 14px; white-space: nowrap;
}
.chip .mono { font-size: 12px; color: var(--graphite); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-style: solid; }
.chip[aria-pressed="true"] .mono { color: var(--cream); opacity: 0.8; }
.chip-add { width: 44px; padding: 0; justify-content: center; }

/* ------------------------------------------------------------------ verdict stamps */
.stamp {
  display: inline-block; flex: none; padding: 4px 9px; white-space: nowrap;
  font: 700 12px/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  border: var(--line); box-shadow: var(--shadow-stamp); transform: rotate(-3deg);
}
.stamp-fits { background: var(--blue); color: #fff; }
.stamp-tight { background: var(--tape); color: var(--ink); }
.stamp-spill { background: var(--tomato); color: var(--ink); transform: rotate(3deg); }
.stamp-blocked { background: var(--ink); color: var(--cream); box-shadow: 2px 2px 0 var(--graphite); }
.stamp-slam { animation: stamp-slam 160ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes stamp-slam {
  0% { transform: scale(1.4) rotate(var(--tilt, -3deg)); opacity: 0; }
  70% { transform: scale(1) translate(2px, 2px) rotate(var(--tilt, -3deg)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--tilt, -3deg)); }
}
.stamp-spill.stamp-slam { --tilt: 3deg; }

/* ------------------------------------------------------------------ device frame */
.frame {
  position: relative; background: var(--paper);
  border: var(--line-frame); border-radius: var(--r-frame); box-shadow: var(--shadow-hero);
}
.frame-screen { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--r-frame) - 3px); }
.spill-tab {
  position: absolute; top: 46%; height: 64px; min-width: 8px;
  background: var(--hatch); border: var(--line); border-left: 0; border-radius: 0 6px 6px 0;
}
.pop-in { animation: pop-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
@keyframes pop-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* skeleton shown while a frame loads */
.skeleton { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.skeleton i { display: block; border-radius: 3px; background: var(--dust); }
.skeleton b { display: block; border-radius: 6px; background: var(--sand); }

/* ------------------------------------------------------------------ patterns */
.dots { background: var(--dots), var(--cream); }
.hatch { background: var(--hatch); }
.tape {
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 80px) left bottom / 100% 22px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 16px) left bottom / 100% 10px no-repeat,
    var(--tape);
}

/* ------------------------------------------------------------------ cards & code */
.card { background: var(--paper); border: var(--line-frame); border-radius: var(--r-frame); box-shadow: var(--shadow-hero); }
.code {
  display: inline-block; padding: 6px 10px; background: var(--cream); border: var(--line); border-radius: 8px;
  font: 400 13px/1.4 var(--font-mono); overflow-wrap: anywhere;
}

@media (forced-colors: active) {
  .btn-toggle[aria-pressed="true"], .chip[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}