/*  ============================================================
    TTBP Design Tokens — single source of truth for colors,
    typography, spacing, radii, and shadows across all pages.
    ============================================================ */

:root {
    /* ── Brand ─────────────────────────────────────────────── */
    --ttbp-primary:          #00A651;
    --ttbp-primary-dark:     #15803d;
    --ttbp-primary-hover:    #008c44;
    --ttbp-primary-light:    #e6f7ee;

    /* ── Semantic ──────────────────────────────────────────── */
    --ttbp-success:          #2e7d32;
    --ttbp-danger:           #dc3545;
    --ttbp-danger-light:     #fef2f2;
    --ttbp-warning:          #f57c00;
    --ttbp-warning-light:    #fff8e1;
    --ttbp-info:             #0277bd;
    --ttbp-info-light:       #e3f2fd;

    /* ── Neutral / Gray Scale ──────────────────────────────── */
    --ttbp-white:            #ffffff;
    --ttbp-gray-50:          #f9fafb;
    --ttbp-gray-100:         #f3f4f6;
    --ttbp-gray-200:         #e5e7eb;
    --ttbp-gray-300:         #d1d5db;
    --ttbp-gray-400:         #9ca3af;
    --ttbp-gray-500:         #6b7280;
    --ttbp-gray-600:         #4b5563;
    --ttbp-gray-700:         #374151;
    --ttbp-gray-900:         #111827;

    /* ── Typography ────────────────────────────────────────── */
    --ttbp-font:             'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ttbp-font-mono:        'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --ttbp-fs-xs:            11px;
    --ttbp-fs-sm:            12px;
    --ttbp-fs-base:          14px;
    --ttbp-fs-lg:            16px;
    --ttbp-fs-xl:            18px;
    --ttbp-fs-2xl:           20px;
    --ttbp-fs-3xl:           24px;
    --ttbp-fw-normal:        400;
    --ttbp-fw-medium:        500;
    --ttbp-fw-semibold:      600;
    --ttbp-fw-bold:          700;

    /* ── Spacing Scale ─────────────────────────────────────── */
    --ttbp-sp-1:             4px;
    --ttbp-sp-2:             8px;
    --ttbp-sp-3:             12px;
    --ttbp-sp-4:             16px;
    --ttbp-sp-5:             20px;
    --ttbp-sp-6:             24px;
    --ttbp-sp-8:             32px;

    /* ── Borders ───────────────────────────────────────────── */
    --ttbp-border:           #e5e7eb;
    --ttbp-border-dark:      #d1d5db;
    --ttbp-radius-sm:        4px;
    --ttbp-radius:           6px;
    --ttbp-radius-lg:        8px;
    --ttbp-radius-xl:        12px;
    --ttbp-radius-full:      9999px;

    /* ── Shadows ───────────────────────────────────────────── */
    --ttbp-shadow-sm:        0 1px 2px rgba(0,0,0,0.05);
    --ttbp-shadow:           0 4px 12px rgba(0,0,0,0.08);
    --ttbp-shadow-lg:        0 12px 24px rgba(0,0,0,0.12);
    --ttbp-shadow-xl:        0 20px 40px rgba(0,0,0,0.16);

    /* ── Inputs / Form Controls ────────────────────────────── */
    --ttbp-input-h:          38px;
    --ttbp-input-px:         12px;
    --ttbp-input-border:     var(--ttbp-border);
    --ttbp-input-radius:     var(--ttbp-radius);
    --ttbp-input-focus:      0 0 0 2px rgba(0,166,81,0.15);

    /* ── Buttons ───────────────────────────────────────────── */
    --ttbp-btn-h:            38px;
    --ttbp-btn-px:           18px;
    --ttbp-btn-radius:       var(--ttbp-radius);
    --ttbp-btn-fw:           var(--ttbp-fw-semibold);

    /* ── Tables ────────────────────────────────────────────── */
    --ttbp-th-bg:            var(--ttbp-gray-50);
    --ttbp-td-py:            10px;
    --ttbp-td-px:            12px;
    --ttbp-table-border:     var(--ttbp-border);

    /* ── Toggle Switch ─────────────────────────────────────── */
    --ttbp-toggle-w:         40px;
    --ttbp-toggle-h:         24px;
    --ttbp-toggle-knob:      16px;
    --ttbp-toggle-off:       var(--ttbp-gray-300);
    --ttbp-toggle-on:        var(--ttbp-primary);
}