/* ============================================================
   theme.css — design tokens & fonts
   Loaded FIRST in <head>. Contains only order-independent rules
   (custom properties, @font-face) so later stylesheets always win.
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-var-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('/fonts/outfit-var-latin.woff2') format('woff2');
}

:root {
    /* Surfaces */
    --bg: #05060a;
    --surface-1: #0d1017;
    --surface-2: #131722;
    --surface-3: #1a1f2e;

    /* Lines */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --line-gold: rgba(252, 182, 4, 0.35);

    /* Brand */
    --gold: #fcb604;
    --gold-soft: rgba(252, 182, 4, 0.12);
    --gold-grad: linear-gradient(135deg, #ffd54a, #fcb604 55%, #e09e00);
    --gold-ink: #1a1200; /* dark text on gold */

    /* Text */
    --text: #f2f4f8;
    --text-dim: #a8b0bf;
    --text-faint: #6f7787;

    /* Chat brands */
    --messenger-grad: linear-gradient(180deg, #0084ff, #006fe6);
    --telegram-grad: linear-gradient(180deg, #2aabee, #229ed9);
    --whatsapp-grad: linear-gradient(180deg, #25d366, #128c7e);

    /* Shape */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Elevation */
    --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
    --glow-gold: 0 0 0 1px rgba(252, 182, 4, 0.45), 0 6px 28px rgba(252, 182, 4, 0.16);

    /* Type */
    --font-head: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --container: 1200px;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(252, 182, 4, 0.3);
    color: #fff;
}