/* ════════════════════════════════════════════════════════
   CORE GRID — India-first cyber palette
   Saffron USDT · Amethyst CRYO · Copper highlights
   ════════════════════════════════════════════════════════ */
:root {
  /* ── Base palette ────────────────────────────────────── */
  --bg:           #0B0908;
  --bg-2:         #120E0B;

  --panel:        #171210;
  --panel-2:      #211712;
  --panel-3:      #2A1A12;

  --border:       rgba(255, 170, 84, 0.16);
  --border-soft:  rgba(255, 255, 255, 0.07);

  --text:         #F7EBDD;
  --muted:        #A99480;

  --grid:         #FF7A1A;
  --grid-2:       #FFB04A;

  --cryo:         #D884FF;
  --cryo-2:       #8C5CFF;

  --core:         #FF9D2E;
  --core-glow:    rgba(255, 122, 26, 0.45);

  --success:      #38D996;
  --danger:       #FF4D3D;

  /* ── Surfaces (legacy aliases) ───────────────────────── */
  --bg-grad-a:    var(--bg);
  --bg-grad-b:    var(--bg-2);
  --surface:      var(--panel);
  --surface-2:    var(--panel-2);
  --surface-3:    var(--panel-3);
  --card:         rgba(255, 170, 84, 0.045);
  --card-hover:   rgba(255, 170, 84, 0.085);

  /* ── Borders (legacy aliases) ────────────────────────── */
  --border-strong:rgba(255, 170, 84, 0.28);
  --divider:      var(--border-soft);

  /* ── USDT / primary actions ──────────────────────────── */
  --primary:      var(--grid);
  --primary-400:  var(--grid-2);
  --primary-dim:  rgba(255, 122, 26, 0.14);
  --primary-glow: var(--core-glow);

  /* ── CRYO / Chakra boost ─────────────────────────────── */
  --premium:      var(--cryo);
  --premium-2:    var(--cryo-2);
  --premium-dim:  rgba(216, 132, 255, 0.12);

  /* ── Amethyst accents (boost ring, rank) ─────────────── */
  --violet:       var(--cryo-2);
  --violet-dim:   rgba(140, 92, 255, 0.14);

  /* ── Secondary chrome — copper/gold, not cyan ────────── */
  --terminal:     var(--grid-2);
  --terminal-dim: rgba(255, 176, 74, 0.12);
  --sky:          var(--grid-2);
  --sky-dim:      var(--terminal-dim);

  --success-dim:  rgba(56, 217, 150, 0.12);
  --danger-dim:   rgba(255, 77, 61, 0.12);

  --brand-grad:   none;
  --saffron-grad: none;
  --premium-glow: transparent;
  --violet-glow:  transparent;

  /* ── Text (legacy aliases) ───────────────────────────── */
  --text-soft:    #C9B5A3;
  --text-muted:   var(--muted);
  --text-faint:   #7A6554;

  /* ── Typography ──────────────────────────────────────── */
  --font-sans:    Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  --font-display: var(--font-sans);

  /* Responsive type scale */
  --fs-title:     clamp(36px, 10vw, 48px);
  --fs-page-title: clamp(36px, 10vw, 48px);
  --fs-section-title: clamp(22px, 5.5vw, 28px);
  --fs-card-title: clamp(14px, 3.6vw, 18px);
  --fs-action-title: clamp(18px, 4.5vw, 22px);
  --fs-balance:   clamp(32px, 8vw, 42px);
  --fs-timer:     clamp(42px, 13vw, 64px);
  --fs-card-val:  clamp(24px, 6vw, 34px);
  --fs-label-sm:  clamp(11px, 2.6vw, 13px);

  --fs-section:   var(--fs-label-sm);
  --ls-title:     0.02em;
  --ls-section:   0.08em;
  --ls-btn:       0.02em;

  --fs-2xs:  clamp(9px, 2.2vw, 10px);
  --fs-xs:   var(--fs-label-sm);
  --fs-sm:   clamp(12px, 3vw, 14px);
  --fs-md:   clamp(13px, 3.4vw, 15px);
  --fs-lg:   clamp(15px, 3.8vw, 17px);
  --fs-xl:   clamp(18px, 4.6vw, 22px);
  --fs-2xl:  clamp(22px, 5.5vw, 28px);
  --fs-3xl:  clamp(26px, 6.5vw, 32px);

  --fw-reg:  400;
  --fw-med:  500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black:800;

  /* ── Radii ───────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  clamp(5px, 1.4vw, 7px);
  --r-md:  clamp(8px, 2.2vw, 10px);
  --r-lg:  clamp(10px, 2.8vw, 12px);
  --r-xl:  clamp(12px, 3.2vw, 14px);
  --r-card: clamp(16px, 4vw, 20px);
  --r-full: 999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:  0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-md:  0 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 4px 0 rgba(0, 0, 0, 0.5);
  --glow-saffron: none;
  --glow-violet:  none;

  /* ── Layout ──────────────────────────────────────────── */
  --nav-h:           76px;
  --nav-core-lift:   10px;
  --nav-core-size:   52px;
  --safe-b:          env(safe-area-inset-bottom, 0px);
  --app-max:         430px;
  --app-h-pad:       16px;
  --app-v-pad-top:   8px;
  --nav-bar-height:  76px;
  --nav-total-h:     var(--nav-bar-height);
  --bottom-nav-height: calc(var(--nav-bar-height) + var(--safe-b));
  --content-bottom-pad: calc(var(--bottom-nav-height) + 20px);
  --app-bottom-pad:  var(--content-bottom-pad);
  --topbar-height:   clamp(48px, 12vw, 56px);
  --gap-stack:       clamp(8px, 2.4vw, 14px);
  --gap-core:        clamp(4px, 1vh, 10px);
  --card-pad:        clamp(10px, 2.8vw, 13px);
  --card-pad-sm:     clamp(8px, 2.2vw, 10px);
  --card-pad-lg:     clamp(12px, 3.2vw, 15px);
  --core-hero-size:  clamp(180px, 58vw, 250px);
  --core-hero-size-cooldown: clamp(160px, 52vw, 220px);
  --core-compact-size: var(--core-hero-size);
  --chakra-reel-size: min(72vw, 280px);
  --core-size:       var(--core-hero-size);

  /* ── Motion ──────────────────────────────────────────── */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:       0.12s var(--ease);
  --t-med:        0.2s var(--ease);
}