/* ================================================================
   MATRIX CARD TOKENS — mc-* design system
   Mobile-first card-forward redesign tokens (v3)
   Loaded after linear-tokens.css; extends, does not replace
   ================================================================ */

:root {
    /* === SURFACE / PALETTE === */
    --mc-bg: #010314;
    --mc-bg-soft: #06091F;
    --mc-text: #DFE1F4;
    --mc-text-soft: #9396B5;
    --mc-text-mute: #5E6077;
    --mc-teal: #22B285;
    --mc-teal-rgb: 34, 178, 133;
    --mc-teal-glow: rgba(34, 178, 133, 0.22);
    --mc-cta-fg: #2A2B3A;
    --mc-cta-bg: rgba(255, 255, 255, 0.95);

    /* === RADII === */
    --mc-radius-sm: 12px;
    --mc-radius-md: 16px;
    --mc-radius-lg: 22px;
    --mc-radius-card: 18px;
    --mc-radius-card-lg: 22px;

    /* === PADDING === */
    --mc-pad-tight: 14px 16px;
    --mc-pad-default: 18px 20px;
    --mc-pad-generous: 28px 24px;

    /* === BORDERS === */
    --mc-border-hairline: 1px solid rgba(223, 225, 244, 0.08);
    --mc-border-hairline-strong: 1px solid rgba(223, 225, 244, 0.14);
    --mc-border-teal: 1px solid rgba(34, 178, 133, 0.35);

    /* === SURFACES === */
    --mc-surface-flat: #070A22;
    --mc-surface-raised: linear-gradient(135deg, #0A1230 0%, #06091F 100%);
    --mc-surface-foil: conic-gradient(from 210deg at 70% 30%,
        rgba(34, 178, 133, 0.10),
        transparent 30%,
        rgba(223, 225, 244, 0.05) 60%,
        transparent 90%);

    /* === GLOWS / SHADOWS === */
    --mc-glow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --mc-glow-outer-soft: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --mc-glow-outer-lift: 0 24px 60px -20px rgba(34, 178, 133, 0.18);
    --mc-halo-teal: 0 0 32px -6px rgba(34, 178, 133, 0.22);

    /* === MOTION === */
    --mc-ease-quiet: cubic-bezier(0.2, 0.6, 0.2, 1);
    --mc-dur-tap: 120ms;
    --mc-dur-settle: 220ms;
    --mc-dur-reveal: 420ms;

    /* === TYPE SCALE (mobile-first) === */
    --mc-type-eyebrow: 11px;
    --mc-type-eyebrow-tracking: 0.16em;
    --mc-type-h1: 36px;
    --mc-type-h1-lh: 40px;
    --mc-type-h2: 28px;
    --mc-type-h2-lh: 32px;
    --mc-type-h3: 20px;
    --mc-type-h3-lh: 26px;
    --mc-type-body: 16px;
    --mc-type-body-lh: 24px;
    --mc-type-small: 14px;
    --mc-type-small-lh: 20px;
    --mc-type-stat: 32px;
    --mc-type-stat-lh: 36px;

    /* === LAYOUT === */
    --mc-section-pad-y: 56px;
    --mc-section-pad-x: 20px;
    --mc-gap-card: 12px;
    --mc-gap-card-lg: 16px;
}

@media (min-width: 640px) {
    :root {
        --mc-type-h1: 48px;
        --mc-type-h1-lh: 52px;
        --mc-type-h2: 34px;
        --mc-type-h2-lh: 40px;
        --mc-type-stat: 40px;
        --mc-type-stat-lh: 44px;
        --mc-section-pad-y: 72px;
        --mc-section-pad-x: 32px;
        --mc-gap-card: 16px;
    }
}

@media (min-width: 1024px) {
    :root {
        --mc-type-h1: 64px;
        --mc-type-h1-lh: 68px;
        --mc-type-h2: 44px;
        --mc-type-h2-lh: 50px;
        --mc-section-pad-y: 96px;
        --mc-section-pad-x: 48px;
        --mc-gap-card: 20px;
    }
}