/* ─────────────────────────────────────────────
   Design tokens + utilities — AI Development sub-pages
   Visualization tokens (:root) · Scroll-reveal utility
   Used by: all pages
   ───────────────────────────────────────────── */

/* ── Scroll-reveal ── */
.scroll-hidden {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Visualization tokens ── */
:root {

    --modal-lightbox-bg: #0a0a12;

    --terminal-bg: #0d0d14;
    --terminal-header-bg: #1a1a24;
    --terminal-dot-red: #ff5f57;
    --terminal-dot-yellow: #febc2e;
    --terminal-dot-green: #28c840;

    --card-hover-lift: -6px;

    --transition-page: 0.22s;
    --transition-page-enter: 0.2s;
    --transition-card: 0.4s;
    --transition-modal: 0.26s;

    --swimlane-row-height: 88px;
    --chart-axis-color: color-mix(in srgb, var(--text-color) 20%, transparent);
    --chart-after-color: var(--accent-color);
    --moat-ring-1: color-mix(in srgb, var(--accent-color) 60%, transparent);
    --moat-ring-2: color-mix(in srgb, var(--accent-color) 30%, transparent);
    --moat-ring-3: color-mix(in srgb, var(--accent-color) 14%, transparent);
    --loop-connector-color: color-mix(in srgb, var(--accent-color) 35%, transparent);

    --status-success: #22c55e;
    --status-warning: #f59e0b;
    --status-danger: #ef4444;
    --status-info: #60a5fa;

    --accent-challenge: #f59e0b;
    --accent-leverage: var(--status-success);
    --accent-mechanics: #4f6efd;

    --terminal-prompt: #22c55e;
    --terminal-cmd: #a5b4fc;

    --background-color-deep: #07070f;
    --border-color-subtle: rgba(255, 255, 255, 0.08);

    --chart-before-color: color-mix(in srgb, var(--status-warning) 80%, transparent);

    /* ── Typography tokens ── */
    --fw-regular: 400;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-display: 800;

    --lh-tight: 1.2;
    --lh-body: 1.6;
    --lh-loose: 1.75;

    --ls-display: -0.03em;
    --ls-label: 0.16em;

    --fs-xs: 0.78rem;
    --fs-label: 0.75rem;
    --fs-meta: 0.8125rem;
    --fs-sm: 0.875rem;
    --fs-body: 1rem;
    --fs-lg: 1.125rem;
    --fs-h4: 1.375rem;
    --fs-h3: clamp(1.5rem, 2.5vw, 1.875rem);
    --fs-h2: clamp(1.875rem, 3.5vw, 2.5rem);
    --fs-h1: clamp(2.25rem, 5vw, 3.5rem);

    /* ── Border-radius tokens ── */
    --layer-radius-6:  6px;
    --layer-radius-8:  8px;
    --layer-radius-12: 12px;

    /* ── Spacing tokens ── */
    --layer-space-2: 2px;
    --layer-space-3: 3px;
    --layer-space-4: 4px;
    --layer-space-5: 5px;
    --layer-space-6: 6px;
    --layer-space-7: 7px;
    --layer-space-8: 8px;
    --layer-space-9: 9px;
    --layer-space-10: 10px;
    --layer-space-12: 12px;
    --layer-space-14: 14px;
    --layer-space-16: 16px;
    --layer-space-18: 18px;
    --layer-space-20: 20px;
    --layer-space-21: 21px;
    --layer-space-22: 22px;
    --layer-space-24: 24px;
    --layer-space-26: 26px;
    --layer-space-28: 28px;
    --layer-space-32: 32px;
    --layer-space-36: 36px;
    --layer-space-40: 40px;
    --layer-space-44: 44px;
    --layer-space-48: 48px;
    --layer-space-52: 52px;
    --layer-space-56: 56px;
    --layer-space-80: 80px;
}