/* ==========================================================================
   X666 Game Apk — Design Tokens
   OptiRank Studio · theme: "dark-arcade-noir" (PLACEHOLDER palette)
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE THAT MAY CONTAIN RAW HEX VALUES.
   Swap the hex values in :root below once the brand theme image is uploaded.
   Everything else in the project references these custom properties.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     1. COLOR — brand
     -------------------------------------------------------------------- */
  --color-bg: #0D0D0D;                 /* page background */
  --color-bg-alt: #111111;             /* alternating section background */
  --color-surface: #161616;            /* cards, nav */
  --color-surface-2: #1E1E1E;          /* raised cards, inputs, accordions */
  --color-surface-3: #262626;          /* hover / active surface */
  --color-border: #2A2A2A;             /* hairline borders */
  --color-border-strong: #3A3A3A;      /* stronger dividers */

  /* Accent — gold (primary) */
  --color-accent: #FFD700;
  --color-accent-hover: #FFE34D;
  --color-accent-active: #E6C200;
  --color-accent-soft: rgba(255, 215, 0, 0.12);
  --color-on-accent: #0D0D0D;          /* text/icon sitting on gold */

  /* Accent — red (secondary, from logo swoosh) */
  --color-accent-2: #E8112D;
  --color-accent-2-hover: #FF2E45;
  --color-accent-2-soft: rgba(232, 17, 45, 0.12);

  /* Text */
  --color-text: #F5F5F5;               /* primary text */
  --color-text-muted: #A0A0A0;         /* secondary text */
  --color-text-faint: #6E6E6E;         /* disabled / captions */
  --color-heading: #FFFFFF;

  /* Status */
  --color-success: #2ECC71;
  --color-warning: #F5A623;
  --color-danger: #FF4D4F;
  --color-info: #3DA9FC;

  /* Channel brand accents (support links) */
  --color-telegram: #229ED9;
  --color-whatsapp: #25D366;

  /* Focus ring (accessibility) */
  --color-focus: #FFE34D;

  /* Overlays / scrims */
  --color-scrim: rgba(0, 0, 0, 0.72);
  --color-scrim-soft: rgba(0, 0, 0, 0.45);

  /* --------------------------------------------------------------------
     2. GRADIENTS
     -------------------------------------------------------------------- */
  --gradient-accent: linear-gradient(135deg, #FFD700 0%, #FFB300 100%);
  --gradient-accent-red: linear-gradient(135deg, #E8112D 0%, #B00020 100%);
  --gradient-hero: radial-gradient(120% 120% at 50% 0%, #1A1A1A 0%, #0D0D0D 60%);
  --gradient-surface: linear-gradient(180deg, #1E1E1E 0%, #161616 100%);

  /* --------------------------------------------------------------------
     3. TYPOGRAPHY
     -------------------------------------------------------------------- */
  --font-display: "Orbitron", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas,
    "Liberation Mono", monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-xs: 0.75rem;                    /* 12px */
  --fs-sm: 0.875rem;                   /* 14px */
  --fs-base: 1rem;                     /* 16px */
  --fs-md: 1.125rem;                   /* 18px */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --ls-tight: -0.01em;
  --ls-wide: 0.04em;
  --ls-wider: 0.12em;                  /* Orbitron display caps */

  /* --------------------------------------------------------------------
     4. SPACING — 4px base scale
     -------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;                  /* 4 */
  --space-2: 0.5rem;                   /* 8 */
  --space-3: 0.75rem;                  /* 12 */
  --space-4: 1rem;                     /* 16 */
  --space-5: 1.5rem;                   /* 24 */
  --space-6: 2rem;                     /* 32 */
  --space-7: 2.5rem;                   /* 40 */
  --space-8: 3rem;                     /* 48 */
  --space-9: 4rem;                     /* 64 */
  --space-10: 5rem;                    /* 80 */
  --space-11: 6rem;                    /* 96 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3rem, 6vw, 5.5rem);

  /* --------------------------------------------------------------------
     5. RADIUS
     -------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --------------------------------------------------------------------
     6. SHADOW & GLOW
     -------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Accent-colored glow for CTAs */
  --glow-accent: 0 0 0 rgba(255, 215, 0, 0);
  --glow-accent-hover: 0 6px 24px rgba(255, 215, 0, 0.35);
  --glow-accent-strong: 0 0 32px rgba(255, 215, 0, 0.45);
  --glow-red: 0 6px 24px rgba(232, 17, 45, 0.35);

  /* --------------------------------------------------------------------
     7. Z-INDEX
     -------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky-bar: 200;                 /* mobile bottom download bar */
  --z-header: 300;                     /* sticky nav */
  --z-fab: 400;                        /* Telegram support FAB */
  --z-overlay: 900;                    /* scrims */
  --z-modal: 1000;                     /* age gate / dialogs */
  --z-toast: 1100;

  /* --------------------------------------------------------------------
     8. TRANSITIONS & MOTION
     -------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  --transition-color: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
  --transition-transform: transform var(--dur-base) var(--ease-out);
  --transition-shadow: box-shadow var(--dur-base) var(--ease-standard);

  /* --------------------------------------------------------------------
     9. COMPONENT TOKENS
     -------------------------------------------------------------------- */
  --header-height: 64px;
  --mobile-bar-height: 64px;
  --fab-size: 56px;
  --tap-target: 44px;                  /* WCAG min touch target */
  --focus-ring: 0 0 0 3px var(--color-focus);
}

/* Respect reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}