/* ============================================================
   variables.css — design tokens (single source of truth)
   ============================================================ */

:root {

    /* ── Colours ── */
    --bg:           #07080f;
    --surface:      #0f1120;
    --surface-2:    #161929;
    --surface-3:    #1d2035;

    --text:         #f0f1ff;
    --text-muted:   #7b7f9e;
    --text-faint:   #3f4460;

    --border:       rgba(255, 255, 255, 0.07);
    --border-hover: rgba(255, 255, 255, 0.15);

    /* Accent palette */
    --accent-orange: #ff5c35;
    --accent-yellow: #ffb800;
    --accent-cyan:   #00d4ff;
    --accent-purple: #a855f7;
    --accent-green:  #00e57a;

    /* Gradients */
    --grad-primary:  linear-gradient(135deg, #ff5c35, #ffb800);
    --grad-purple:   linear-gradient(135deg, #a855f7, #00d4ff);
    --grad-green:    linear-gradient(135deg, #00e57a, #00d4ff);

    /* Status */
    --success: #00e57a;
    --warning: #ffb800;
    --error:   #ff5c35;
    --info:    #00d4ff;

    /* ── Typography ── */
    --font-display: 'Syne', sans-serif;
    --font-body:    'DM Sans', sans-serif;

    --text-xs:   0.70rem;   /* 11px */
    --text-sm:   0.825rem;  /* 13px */
    --text-base: 0.9375rem; /* 15px */
    --text-md:   1rem;      /* 16px */
    --text-lg:   1.125rem;  /* 18px */
    --text-xl:   1.25rem;   /* 20px */
    --text-2xl:  1.5rem;    /* 24px */
    --text-3xl:  2rem;      /* 32px */
    --text-4xl:  2.5rem;    /* 40px */
    --text-5xl:  3.5rem;    /* 56px */
    --text-6xl:  5rem;      /* 80px */

    /* ── Spacing ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ── Border radius ── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-pill: 100px;

    /* ── Shadows ── */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow-orange: 0 8px 24px rgba(255, 92, 53, 0.35);
    --shadow-glow-purple: 0 8px 24px rgba(168, 85, 247, 0.35);

    /* ── Transitions ── */
    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;

    /* ── Layout ── */
    --container-max:  1200px;
    --nav-height:     68px;
}