/* ── Base palette ───────────────────────────────────────────── */
:root {
  /* ink + neutrals */
  --ink: #171717;
  --gray-body: #4d4d4d;
  --gray-mute: #888888;
  --hairline: #ebebeb;
  --hairline-strong: #a1a1a1;
  --canvas: #ffffff;
  --canvas-soft: #fafafa;
  --canvas-soft-2: #f5f5f5;
  --on-primary: #ffffff;

  /* blue / link */
  --blue: #0070f3;
  --blue-deep: #0761d1;
  --blue-soft: #d3e5ff;

  /* semantic hues */
  --red: #ee0000;
  --red-soft: #f7d4d6;
  --red-deep: #c50000;
  --amber: #f5a623;
  --amber-soft: #ffefcf;
  --amber-deep: #ab570a;
  --violet: #7928ca;
  --violet-soft: #d8ccf1;
  --violet-deep: #4c2889;
  --cyan: #50e3c2;
  --cyan-soft: #aaffec;
  --cyan-deep: #29bc9b;
  --pink: #ff0080;
  --magenta: #eb367f;

  /* gradient stops, the brand's only decorative system */
  --grad-develop-start: #007cf0;
  --grad-develop-end: #00dfd8;
  --grad-preview-start: #7928ca;
  --grad-preview-end: #ff0080;
  --grad-ship-start: #ff4d4d;
  --grad-ship-end: #f9cb28;
}

/* ── Semantic aliases ───────────────────────────────────────── */
:root {
  --primary: var(--ink);
  --primary-fg: var(--on-primary);

  --text-heading: var(--ink);
  --text-body: var(--gray-body);
  --text-mute: var(--gray-mute);
  --text-inverse: var(--on-primary);
  --text-link: var(--blue);
  --text-link-pressed: var(--blue-deep);

  --surface-page: var(--canvas-soft);
  --surface-card: var(--canvas);
  --surface-inset: var(--canvas-soft-2);
  --surface-dark: var(--ink);

  --border-default: var(--hairline);
  --border-strong: var(--hairline-strong);

  --status-success: var(--blue);
  --status-error: var(--red);
  --status-error-bg: var(--red-soft);
  --status-warning: var(--amber);
  --status-warning-bg: var(--amber-soft);
  --status-info-bg: var(--blue-soft);

  --selection-bg: var(--ink);
  --selection-fg: #f2f2f2;

  /* gradient pairs + the collapsed hero mesh */
  --gradient-develop: linear-gradient(90deg, var(--grad-develop-start), var(--grad-develop-end));
  --gradient-preview: linear-gradient(90deg, var(--grad-preview-start), var(--grad-preview-end));
  --gradient-ship: linear-gradient(90deg, var(--grad-ship-start), var(--grad-ship-end));
  --gradient-mesh:
    radial-gradient(60% 80% at 18% 12%, color-mix(in oklab, var(--grad-develop-start) 70%, transparent), transparent 70%),
    radial-gradient(55% 75% at 42% 4%, color-mix(in oklab, var(--grad-develop-end) 62%, transparent), transparent 70%),
    radial-gradient(60% 85% at 66% 10%, color-mix(in oklab, var(--grad-preview-end) 60%, transparent), transparent 72%),
    radial-gradient(55% 80% at 86% 20%, color-mix(in oklab, var(--grad-ship-end) 60%, transparent), transparent 70%),
    radial-gradient(70% 70% at 50% 0%, color-mix(in oklab, var(--grad-preview-start) 45%, transparent), transparent 75%);
}