/* ============================================================
   COLOR TOKENS
   Ink + gray + a four-pair mesh gradient. No sixth accent.
   The marketing surface uses only the 100 / 700 / 1000 gray tones;
   the rest of the scale exists for in-product surfaces.
   ============================================================ */
:root {
  /* ---- Gray scale (the system's backbone) ---- */
  --ds-gray-100: #f5f5f5;
  --ds-gray-200: #ebebeb;
  --ds-gray-300: #e3e3e3;
  --ds-gray-400: #cfcfcf;
  --ds-gray-500: #a1a1a1;
  --ds-gray-600: #888888;
  --ds-gray-700: #6b6b6b;
  --ds-gray-800: #4d4d4d;
  --ds-gray-900: #2e2e2e;
  --ds-gray-1000: #171717;

  /* ---- In-product accent scales (triads: base / soft / deep) ---- */
  --ds-blue-soft: #d3e5ff;
  --ds-blue: #0070f3;
  --ds-blue-deep: #0761d1;

  --ds-red-soft: #f7d4d6;
  --ds-red: #ee0000;
  --ds-red-deep: #c50000;

  --ds-amber-soft: #ffefcf;
  --ds-amber: #f5a623;
  --ds-amber-deep: #ab570a;

  --ds-green-soft: #d3f5e0;
  --ds-green: #0cce6b;
  --ds-green-deep: #099250;

  --ds-teal-soft: #cdf5ee;
  --ds-teal: #50e3c2;
  --ds-teal-deep: #1a9e85;

  --ds-purple-soft: #ecd9fb;
  --ds-purple: #7928ca;
  --ds-purple-deep: #5a1a99;

  --ds-pink-soft: #ffd6ea;
  --ds-pink: #ff0080;
  --ds-pink-deep: #c70065;

  /* ============================================================
     SEMANTIC ALIASES — what designs should reference
     ============================================================ */

  /* Brand & accent */
  --color-primary: var(--ds-gray-1000);   /* #171717 — the single CTA ink */
  --color-cyan: var(--ds-teal);           /* #50e3c2 */
  --color-highlight-pink: var(--ds-pink); /* #ff0080 */
  --color-violet: var(--ds-purple);       /* #7928ca */

  /* Surface ladder */
  --color-canvas: #ffffff;
  --color-canvas-soft: #fafafa;           /* 98% — default page body */
  --color-canvas-soft-2: #f5f5f5;         /* 95% — inset regions */
  --color-hairline: var(--ds-gray-200);   /* #ebebeb — 1px dividers */
  --color-hairline-strong: var(--ds-gray-500); /* #a1a1a1 */

  /* Text */
  --color-ink: var(--ds-gray-1000);       /* #171717 — headings + body */
  --color-body: var(--ds-gray-800);       /* #4d4d4d — secondary text */
  --color-mute: var(--ds-gray-600);       /* #888888 — placeholders, fine print */
  --color-on-primary: #ffffff;

  /* Semantic */
  --color-link: var(--ds-blue);           /* #0070f3 — also legacy success */
  --color-success: var(--ds-blue);
  --color-link-deep: var(--ds-blue-deep); /* #0761d1 */
  --color-link-bg-soft: var(--ds-blue-soft); /* #d3e5ff */
  --color-error: var(--ds-red);
  --color-error-soft: var(--ds-red-soft);
  --color-error-deep: var(--ds-red-deep);
  --color-warning: var(--ds-amber);
  --color-warning-soft: var(--ds-amber-soft);
  --color-warning-deep: var(--ds-amber-deep);

  /* ============================================================
     BRAND MESH GRADIENT — three pairs, one unified object.
     Never miniaturise, never reorder, never reduce to one colour.
     ============================================================ */
  --gradient-develop-start: #007cf0;
  --gradient-develop-end: #00dfd8;
  --gradient-preview-start: #7928ca;
  --gradient-preview-end: #ff0080;
  --gradient-ship-start: #ff4d4d;
  --gradient-ship-end: #f9cb28;

  /* Linear three-pair sweep (for text-clip and bars) */
  --gradient-brand: linear-gradient(
    90deg,
    var(--gradient-develop-start) 0%,
    var(--gradient-develop-end) 25%,
    var(--gradient-preview-start) 45%,
    var(--gradient-preview-end) 62%,
    var(--gradient-ship-start) 82%,
    var(--gradient-ship-end) 100%
  );

  /* Atmospheric mesh — hero-scale backdrop only */
  --gradient-mesh:
    radial-gradient(40% 55% at 18% 12%, color-mix(in oklch, var(--gradient-develop-start) 85%, transparent) 0%, transparent 60%),
    radial-gradient(38% 50% at 78% 8%, color-mix(in oklch, var(--gradient-develop-end) 80%, transparent) 0%, transparent 55%),
    radial-gradient(45% 60% at 88% 60%, color-mix(in oklch, var(--gradient-preview-end) 75%, transparent) 0%, transparent 60%),
    radial-gradient(48% 55% at 32% 78%, color-mix(in oklch, var(--gradient-preview-start) 70%, transparent) 0%, transparent 60%),
    radial-gradient(40% 45% at 60% 50%, color-mix(in oklch, var(--gradient-ship-start) 65%, transparent) 0%, transparent 55%),
    radial-gradient(35% 40% at 8% 70%, color-mix(in oklch, var(--gradient-ship-end) 70%, transparent) 0%, transparent 55%);
}