/* ==========================================================================
   Migration shim.

   The product pages were each written with their own palette and scale:
   six different accent hues across the site. Rather than rewrite every rule,
   their old variable names are re-pointed at the system tokens here, so all
   pages resolve to one palette, one spacing scale and one set of curves.

   Nothing new is defined below: every value is a system token. New work
   should use the system names directly and ignore this file.
   ========================================================================== */

:root {
    /* --- surfaces ------------------------------------------------------ */
    --bg: var(--ink-900);
    --bg-deep: var(--ink-900);
    --bg-panel: var(--ink-800);
    --bg-secondary: var(--ink-800);
    --bg-card: var(--ink-700);
    --bg-elevated: var(--ink-600);

    /* --- text ---------------------------------------------------------- */
    --text: var(--paper);
    --text-primary: var(--paper);
    --text-dim: var(--paper-dim);
    --text-secondary: var(--paper-dim);
    --text-faint: var(--paper-mute);
    --text-muted: var(--paper-mute);

    /* --- accents -------------------------------------------------------
       Every former hue (cyan, magenta, violet, two reds, green) collapses
       onto the single brand colour. */
    --primary: var(--brand);
    --secondary: var(--brand);
    --accent-cyan: var(--brand);
    --accent-purple: var(--brand);
    --accent-red: var(--brand);
    --accent-red-light: var(--brand);
    --accent-red-dark: var(--brand);

    /* --- borders ------------------------------------------------------- */
    --border: var(--line);
    --border-strong: var(--line-strong);

    /* --- spacing ------------------------------------------------------- */
    --space-xs: var(--s-2);
    --space-sm: var(--s-4);
    --space-md: var(--s-5);
    --space-lg: var(--s-6);
    --space-xl: var(--s-8);
    --space-2xl: var(--s-10);

    /* --- motion --------------------------------------------------------
       Shaped as "<duration> <easing>" because the old rules interpolate
       them straight into a transition shorthand. */
    --ease-out-expo: var(--ease-out);
    --ease-smooth: var(--ease-in-out);
}

/* The old pages set display type in mono at heavy weights. Route them to the
   one grotesk, where hierarchy comes from size and tracking. */
.product-title,
.section-title,
.feature-title,
.hero-title,
.protocol-title,
.pricing-name,
.error-title,
.bento-text h3,
.feature-item h3,
.mesh-content h3,
.req-content h4,
.how-card h3,
.crypto-item .value {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: var(--track-display);
    text-transform: none;
}

.section-tag,
.section-eyebrow,
.product-tagline,
.spec-label,
.stat-label,
.trust-label,
.fact dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--paper-mute);
}

/* Emphasised words in a heading take the accent colour. */
.text-gradient,
.title-accent {
    color: var(--accent);
}