/* ═══════════════════════════════════════════════
   tobot Design Tokens — Single Source of Truth
   v2.1 | March 2026
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Neutrals (Slate scale) ── */
    --tb-white:      #FFFFFF;
    --tb-off-white:  #FAFAFA;
    --tb-gray-50:    #F8FAFC;
    --tb-gray-100:   #F1F5F9;
    --tb-gray-200:   #E2E8F0;
    --tb-gray-300:   #CBD5E1;
    --tb-gray-400:   #94A3B8;
    --tb-gray-500:   #64748B;
    --tb-gray-600:   #475569;
    --tb-gray-700:   #334155;
    --tb-gray-800:   #1E293B;
    --tb-gray-900:   #0F172A;

    /* ── Brand ── */
    --tb-blue:       #2563EB;
    --tb-blue-hover: #1D4ED8;
    --tb-blue-light: #3B82F6;
    --tb-blue-pale:  #EFF6FF;
    --tb-blue-ring:  rgba(37,99,235,0.18);

    --tb-cyan:       #06B6D4;
    --tb-cyan-pale:  #ECFEFF;

    /* ── Semantic ── */
    --tb-green:      #10B981;
    --tb-green-pale: #ECFDF5;
    --tb-red:        #EF4444;
    --tb-red-pale:   #FEF2F2;
    --tb-amber:      #F59E0B;
    --tb-amber-pale: #FFFBEB;

    /* ── Typography ──
       Display: DM Sans — friendly, rounded, highly legible at all sizes.
       Designed by Colophon Foundry. Geometric but warm. Works for
       headings AND UI because it was built for optical sizing (9-40pt).
       Body: Inter — the industry standard for interfaces.
       Mono: JetBrains Mono — for code, badges, counters.
    ── */
    --tb-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tb-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* ── Spacing ── */
    --tb-space-1:  0.25rem;
    --tb-space-2:  0.5rem;
    --tb-space-3:  0.75rem;
    --tb-space-4:  1rem;
    --tb-space-5:  1.25rem;
    --tb-space-6:  1.5rem;
    --tb-space-8:  2rem;
    --tb-space-10: 2.5rem;
    --tb-space-12: 3rem;
    --tb-space-16: 4rem;
    --tb-space-20: 5rem;
    --tb-space-24: 6rem;

    /* ── Radii ── */
    --tb-radius-sm:   6px;
    --tb-radius-md:   8px;
    --tb-radius-lg:   12px;
    --tb-radius-xl:   16px;
    --tb-radius-full: 9999px;

    /* ── Shadows ── */
    --tb-shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
    --tb-shadow-sm:  0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --tb-shadow-md:  0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
    --tb-shadow-lg:  0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03);
    --tb-shadow-xl:  0 20px 25px rgba(0,0,0,0.07), 0 8px 10px rgba(0,0,0,0.03);

    /* ── Borders ── */
    --tb-border:        1px solid var(--tb-gray-200);
    --tb-border-subtle: 1px solid var(--tb-gray-100);

    /* ── Layout ── */
    --tb-nav-h:  64px;
    --tb-max-w:  1200px;
    --tb-pad:    max(20px, 5vw);

    /* ── Transitions ── */
    --tb-ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --tb-duration:  150ms;
}