/* myintros.app — design tokens: the single source of truth for type, color, radius,
   shadow, and control sizing. Loaded by every layout (public, private, admin), so
   any surface can consume them. Custom properties only — no element styles, so
   loading this sheet can never restyle a page by itself. */

:root {
  --font: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;

  --bg: #fbfbfd;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --ink-hover: #3a3a3d;      /* ~22% lift from --ink — the filled-button hover (lighten, not darken). Stronger lift than the original ~10% so the delta reads cleanly against the near-black base. */
  --ink-2: #6e6e73;
  --ink-3: #a1a1a6;
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.05);
  --line-focus: rgba(0, 0, 0, 0.18); /* focused input/prompt border */
  --fill: #f1f1f3;          /* static neutral fill (tiles, inputs) */
  --fill-disabled: #d2d2d7; /* disabled filled control */
  --hover: rgba(0, 0, 0, 0.07); /* neutral control hover/active state */
  --selected: rgba(0, 0, 0, 0.045); /* persistent selected row — lighter than --hover, a quiet marker */

  --accent-rgb: 108 92 231;
  --accent: rgb(var(--accent-rgb));
  --accent-soft: rgb(var(--accent-rgb) / 0.10);
  --accent-dim: color-mix(in srgb, var(--accent) 60%, var(--ink)); /* muted accent for inline text moments */
  --accent-hover: #8274eb;   /* ~15% lift from --accent — the filled-button hover (lighten, not darken) */

  --danger-rgb: 192 57 43;                      /* #c0392b — Flat UI pomegranate, as a triple */
  --danger: rgb(var(--danger-rgb));             /* validation errors & destructive actions */
  --danger-soft: rgb(var(--danger-rgb) / 0.10); /* soft pill behind a destructive action on hover */

  --success: #1f8a4c;                           /* good terminal states (active, accepted) */
  --success-soft: rgb(31 138 76 / 0.10);
  --warning: #9a6700;                           /* needs-your-attention states (pending) */
  --warning-soft: rgb(255 191 0 / 0.14);        /* brighter base than the text — amber pill, readable ink */

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --transition: 0.15s ease; /* house transition for control state shifts (hover, active) */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.12);

  /* Icon-button size ramp. Pick from these; don't invent in-between sizes. */
  --control: 40px;          /* touch targets & floating-over-content controls */
  --control-btn: 38px;      /* text buttons (.btn) and controls that pair with them */
  --control-sm: 32px;       /* compact icon buttons inside the chrome */
}