/**
 * RAITI — Design System Color Tokens
 * ─────────────────────────────────────────────────
 * Source of truth. Every color on raiti.site
 * MUST reference a variable defined here.
 *
 * RULE: No new colors may be introduced.
 * All values were extracted from the live LP palette.
 * ─────────────────────────────────────────────────
 */

:root {
    /* ═══════════════════════════════════
       BACKGROUNDS
       ═══════════════════════════════════ */
    --bg-0: #000000;              /* Pure black — body, primary bg */
    --bg-1: #050505;              /* Near-black — card insets, term-card */

    /* ═══════════════════════════════════
       TEXT  (white at descending opacities)
       ═══════════════════════════════════ */
    --text-0: #ffffff;            /* Headings, strong emphasis */
    --text-1: rgba(255,255,255,.7);   /* Body copy */
    --text-2: rgba(255,255,255,.35);  /* Secondary / descriptions */
    --text-3: rgba(255,255,255,.18);  /* Muted labels, captions */

    /* ═══════════════════════════════════
       SURFACES  (white at very low alpha)
       ═══════════════════════════════════ */
    --surface-0: rgba(255,255,255,.03); /* Card bg, tag bg, icon bg */
    --surface-1: rgba(255,255,255,.06); /* Hover state for surfaces */

    /* ═══════════════════════════════════
       BORDERS  (white at low alpha)
       ═══════════════════════════════════ */
    --border-0: rgba(255,255,255,.06);  /* Default border */
    --border-1: rgba(255,255,255,.1);   /* Hover / active border */
    --border-2: rgba(255,255,255,.02);  /* Faint separator (pricing list) */

    /* ═══════════════════════════════════
       HIGHLIGHTS  (white alpha for glows/effects)
       ═══════════════════════════════════ */
    --highlight-0: rgba(255,255,255,.08); /* Grid lines, faint strokes */
    --highlight-1: rgba(255,255,255,.15); /* Inset button shine */

    /* ═══════════════════════════════════
       OVERLAYS  (black at various alpha)
       ═══════════════════════════════════ */
    --overlay-0: rgba(0,0,0,.4);   /* Light overlay, input bg, btn shadow */
    --overlay-1: rgba(0,0,0,.5);   /* Medium shadow */
    --overlay-2: rgba(0,0,0,.6);   /* Heavy shadow, depth fog */
    --overlay-3: rgba(0,0,0,.85);  /* Nav scrolled bg */
    --overlay-4: rgba(0,0,0,.96);  /* Mobile menu bg */

    /* ═══════════════════════════════════
       ACCENT — Raiti Green
       ═══════════════════════════════════ */
    --accent-0: #39FF14;           /* Primary brand green */
    --accent-0-rgb: 57, 255, 20;  /* RGB triplet for rgba() usage */

    /* ═══════════════════════════════════
       WHATSAPP — Brand
       ═══════════════════════════════════ */
    --wa: #25D366;
    --wa-rgb: 37, 211, 102;

    /* ═══════════════════════════════════
       INTEGRATION BRAND COLORS
       Third-party logos — used ONLY on
       integration icons. Not for UI.
       ═══════════════════════════════════ */
    --brand-woo: #7952b3;
    --brand-amber: #f59e0b;
    --brand-zapier: #8b5cf6;
    --brand-n8n: #06b6d4;
    --brand-make: #ec4899;
    --brand-discord: #5865F2;
    --brand-telegram: #0088cc;
    --brand-shopify: #96bf48;
    --brand-nuvemshop: #2563eb;

    /* ═══════════════════════════════════
       CODE SYNTAX  (terminal / code block)
       ═══════════════════════════════════ */
    --syntax-red: #ef4444;
    --syntax-amber: #f59e0b;
    --syntax-green: #22c55e;
    --syntax-blue: #60a5fa;

    /* ═══════════════════════════════════
       NON-COLOR TOKENS  (kept for compat)
       ═══════════════════════════════════ */
    --r: 12px;
    --ease: cubic-bezier(.4,0,.2,1);
    --tr: .3s var(--ease);
}