/**
 * CR-TOKENS.CSS — Consciousness Revolution Design Tokens
 * ═══════════════════════════════════════════════════════
 * The Builder Standard. Shared across all CR apps.
 * Namespaced --cr-* to avoid collisions with existing page CSS.
 *
 * Usage: <link rel="stylesheet" href="/components/cr-tokens.css">
 * Or auto-loaded by cr-standard.js
 *
 * Session 265 · May 31, 2026
 */

:root {
    /* ── Core Palette ── */
    --cr-bg: #050a08;
    --cr-surface: #0a1210;
    --cr-surface-hover: #0f1a16;
    --cr-card: rgba(255,255,255,0.03);

    /* ── Neon Green Accent ── */
    --cr-accent: #00ff88;
    --cr-accent-dim: rgba(0,255,136,0.1);
    --cr-accent-glow: rgba(0,255,136,0.15);
    --cr-accent-shadow: 0 0 20px rgba(0,255,136,0.08), 0 0 60px rgba(0,255,136,0.03);

    /* ── Battleship Gray (secondary) ── */
    --cr-gray: #6b7280;
    --cr-gray-light: #8b95a5;
    --cr-gray-dim: rgba(107,114,128,0.15);
    --cr-gray-border: rgba(107,114,128,0.2);

    /* ── Forge Colors ── */
    --cr-red: #e74c3c;
    --cr-orange: #f39c12;
    --cr-blue: #3498db;
    --cr-green: #2ecc71;
    --cr-gold: #f1c40f;
    --cr-indigo: #5b5ea6;
    --cr-purple: #9c27b0;

    /* ── Text ── */
    --cr-text: #d0e8dc;
    --cr-text-dim: #5a7a6a;
    --cr-text-faint: #2a3f34;
    --cr-text-bright: #e8f5ef;

    /* ── Borders ── */
    --cr-border: rgba(0,255,136,0.08);
    --cr-border-hover: rgba(0,255,136,0.18);
    --cr-border-subtle: rgba(255,255,255,0.06);

    /* ── Typography ── */
    --cr-font-sans: 'Inter', -apple-system, system-ui, sans-serif;
    --cr-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    /* ── Spacing ── */
    --cr-radius: 10px;
    --cr-radius-lg: 14px;
    --cr-radius-xl: 20px;

    /* ── Z-Index Convention ── */
    --cr-z-content: 1;
    --cr-z-sticky: 100;
    --cr-z-overlay: 1000;
    --cr-z-sheet: 10000;
    --cr-z-modal: 50000;
    --cr-z-toolbar: 90000;
    --cr-z-scrim: 90001;
    --cr-z-drawer: 90002;
    --cr-z-auth: 99999;
}

/* ── Glass Utilities ── */
.cr-glass {
    background: rgba(5,10,8,0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--cr-border);
}
.cr-glass-subtle {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--cr-border-subtle);
}
.cr-glass-card {
    background: var(--cr-card);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius-lg);
    padding: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    transition: all .25s cubic-bezier(0.32,0.72,0,1);
}
.cr-glass-card:hover {
    border-color: var(--cr-border-hover);
    box-shadow: 0 6px 28px rgba(0,0,0,0.35);
}

/* ── Skeleton Shimmer ── */
.cr-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: cr-shimmer 1.5s infinite;
    border-radius: 8px;
    min-height: 20px;
}
@keyframes cr-shimmer {
    from { background-position: 200% center; }
    to { background-position: -200% center; }
}

/* ── Neon Glow Text ── */
.cr-neon {
    color: var(--cr-accent);
    text-shadow: 0 0 20px rgba(0,255,136,0.3);
}
.cr-neon-subtle {
    color: var(--cr-accent);
    text-shadow: 0 0 10px rgba(0,255,136,0.15);
}

/* ── Section Title (with trailing line) ── */
.cr-section-title {
    color: var(--cr-accent);
    font-size: .85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 24px 0 12px;
    font-family: var(--cr-font-mono);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cr-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cr-border);
}

/* ── View Transitions ── */
::view-transition-old(root) { animation: cr-vt-out .2s ease; }
::view-transition-new(root) { animation: cr-vt-in .2s ease; }
@keyframes cr-vt-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes cr-vt-in { from { opacity: 0; transform: scale(0.98); } }

/* ── Scroll-Driven Card Reveal ── */
@supports (animation-timeline: view()) {
    .cr-reveal {
        animation: cr-card-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }
    @keyframes cr-card-reveal {
        from { opacity: 0; transform: translateY(16px) scale(0.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
}

/* ── Fade In ── */
.cr-fade-in {
    animation: cr-fade .25s cubic-bezier(0.32,0.72,0,1);
}
@keyframes cr-fade {
    from { opacity: 0; transform: translateY(12px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Message Bubble Pop ── */
.cr-bubble-in {
    animation: cr-pop .2s ease-out;
}
@keyframes cr-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Scrollbar (thin, dark) ── */
.cr-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--cr-border-subtle) transparent;
}
.cr-scrollbar::-webkit-scrollbar { width: 6px; }
.cr-scrollbar::-webkit-scrollbar-track { background: transparent; }
.cr-scrollbar::-webkit-scrollbar-thumb { background: var(--cr-border-subtle); border-radius: 3px; }

/* ── OLED Safe Background ── */
.cr-bg-oled {
    background: var(--cr-bg);
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(0,255,136,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0,255,136,0.02) 0%, transparent 50%);
}