/* ==========================================================================
   SkyKasino Design System — Tokens
   Authoritative source for color, type, radius, shadow, spacing, motion.
   See /docs/design-system.md for usage guidance.
   ========================================================================== */

:root {
    /* ---------- Surfaces ---------- */
    --sk-bg: #060c24;
    --sk-bg-page: #0a1230;
    --sk-card: #0d1640;
    --sk-card-2: #131c4a;
    --sk-card-border: rgba(255, 255, 255, 0.08);
    --sk-card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --sk-overlay: rgba(6, 12, 36, 0.85);

    /* ---------- Text ---------- */
    --sk-text: #ffffff;
    --sk-text-mid: #c8cad9;
    --sk-text-muted: #8189a8;
    --sk-text-dim: #6c7390;
    --sk-text-dark: #0b1230;

    /* ---------- Accents ---------- */
    --sk-cyan: #5fc8ff;
    --sk-cyan-soft: #8addf2;
    --sk-cyan-deep: #1696ff;
    --sk-gold: #ffd84d;
    --sk-gold-2: #f5d253;
    --sk-gold-deep: #b88523;
    --sk-pink: #ff7aa9;
    --sk-green: #4caf50;
    --sk-green-deep: #1c7c32;
    --sk-red: #d62828;
    --sk-red-deep: #941515;
    --sk-purple: #7b3ddb;
    --sk-purple-deep: #2d1467;
    --sk-blue: #1d63b8;
    --sk-blue-deep: #0c2654;

    /* ---------- Gradients ---------- */
    --sk-grad-cta-blue: linear-gradient(180deg, #0a1f50 0%, #1a4f9e 45%, #6e95cc 50%, #0d2766 55%, #071a44 100%);
    --sk-grad-cta-purple: linear-gradient(180deg, #1c1052 0%, #4a2d97 45%, #9a85cf 50%, #2a1764 55%, #170c40 100%);

    /* Primary button — matches home "Download" CTA recipe (diagonal navy → mid blue) */
    --sk-grad-btn-primary: linear-gradient(105deg, #071535 0%, #0c2654 42%, #105395 100%);
    --sk-btn-primary-border: rgba(55, 167, 255, 0.78);
    --sk-btn-primary-glow: 0 0 12px rgba(55, 167, 255, 0.18);
    --sk-btn-primary-sheen:
        linear-gradient(41deg, rgba(255, 255, 255, 0.14) 0%, transparent 20%, transparent 72%, rgba(255, 255, 255, 0.18) 100%),
        radial-gradient(circle at 90% 15%, rgba(255, 255, 255, 0.24), transparent 38%),
        radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.08), transparent 38%);
    --sk-grad-ghare:
        radial-gradient(ellipse at 30% 50%, rgba(255, 230, 130, 0.4), transparent 60%),
        linear-gradient(110deg, #8a5e15 0%, #c89934 25%, #f5d253 50%, #d6a637 75%, #8a5e15 100%);
    --sk-grad-join: linear-gradient(180deg, #ffd84d 0%, #b88523 100%);
    --sk-grad-card: linear-gradient(180deg, #131c4a 0%, #0a1230 100%);
    --sk-grad-card-soft: linear-gradient(180deg, rgba(19, 28, 74, 0.95) 0%, rgba(10, 18, 48, 0.95) 100%);
    --sk-grad-modal: linear-gradient(180deg, #131c4a 0%, #060c24 100%);

    /* ---------- Radii ---------- */
    --sk-radius-pill: 999px;
    --sk-radius-card: 14px;
    --sk-radius-modal: 20px;
    --sk-radius-tile: 12px;
    --sk-radius-input: 12px;
    --sk-radius-btn: 10px;
    --sk-radius-chip: 8px;

    /* ---------- Spacing scale (4px grid) ---------- */
    --sk-space-1: 4px;
    --sk-space-2: 8px;
    --sk-space-3: 12px;
    --sk-space-4: 16px;
    --sk-space-5: 20px;
    --sk-space-6: 24px;
    --sk-space-7: 32px;
    --sk-space-8: 40px;

    /* ---------- Typography ---------- */
    --sk-font: 'Inter', 'Quicksand', sans-serif;
    --sk-font-mono: 'SFMono-Regular', Menlo, Consolas, monospace;
    --sk-fs-eyebrow: 11px;
    --sk-fs-meta: 12px;
    --sk-fs-body-sm: 13px;
    --sk-fs-body: 14px;
    --sk-fs-label: 15px;
    --sk-fs-title: 17px;
    --sk-fs-display: 22px;
    --sk-fs-hero: 28px;
    --sk-ls-eyebrow: 0.16em;
    --sk-ls-label: 0.06em;
    --sk-lh-tight: 1.2;
    --sk-lh-base: 1.5;

    /* ---------- Shadows ---------- */
    --sk-shadow-card: 0 6px 18px rgba(0, 0, 0, 0.35);
    --sk-shadow-card-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --sk-shadow-pill: 0 4px 14px rgba(0, 0, 0, 0.4);
    --sk-shadow-modal: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --sk-shadow-cyan: 0 0 0 3px rgba(95, 200, 255, 0.18);
    --sk-shadow-cyan-glow: 0 8px 24px rgba(95, 200, 255, 0.28);
    --sk-shadow-gold-glow: 0 8px 24px rgba(255, 216, 77, 0.32);

    /* ---------- Motion ---------- */
    --sk-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --sk-dur-fast: 0.12s;
    --sk-dur-base: 0.2s;
    --sk-dur-slow: 0.3s;
    --sk-dur-modal: 0.28s;

    /* ---------- Z-index ladder ---------- */
    --sk-z-nav: 100;
    --sk-z-header: 110;
    --sk-z-overlay: 1000;
    --sk-z-modal: 1050;
    --sk-z-toast: 1100;

    /* ---------- Layout ---------- */
    --sk-shell-max: 450px;
    --sk-page-pad-x: 14px;
    --sk-page-pad-top: 155px;
    --sk-page-pad-bottom: 96px;
}