/* ============================================================
   BITCOINJACKPOT.ONLINE — Design System Variables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {

  /* ── Colors ─────────────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:           #F5F0E8;   /* warm off-white, main page bg */
  --color-bg-alt:       #EDE8DF;   /* slightly darker for section breaks */
  --color-bg-dark:      #141210;   /* deep charcoal — header, footer */
  --color-bg-dark-alt:  #1E1A16;   /* card bg inside dark sections */
  --color-card:         #FFFFFF;   /* white cards on warm bg */
  --color-card-hover:   #FFFBF4;   /* card hover state */

  /* Primary — BTC Gold */
  --color-gold:         #F7931A;   /* Bitcoin orange-gold */
  --color-gold-dark:    #C9780C;   /* darker gold for hover, borders */
  --color-gold-light:   #FBBA60;   /* lighter gold for glows */
  --color-gold-muted:   #F7931A26; /* gold at 15% opacity — backgrounds */
  --color-gold-glow:    #F7931A40; /* gold at 25% — spotlight effect */

  /* Secondary — Teal */
  --color-teal:         #0FA3B1;   /* link color, info accents */
  --color-teal-dark:    #0B7A85;
  --color-teal-light:   #6DD5E0;
  --color-teal-muted:   #0FA3B11A; /* teal at 10% opacity */

  /* Text */
  --color-text:         #2C2618;   /* main body text, warm dark */
  --color-text-muted:   #6B6358;   /* captions, meta, secondary */
  --color-text-faint:   #A09688;   /* placeholders, very quiet text */
  --color-text-inverse: #F5F0E8;   /* text on dark backgrounds */
  --color-text-gold:    #F7931A;   /* highlighted text */

  /* Status */
  --color-success:      #2D6A4F;
  --color-success-bg:   #D8F3DC;
  --color-danger:       #C1121F;
  --color-danger-bg:    #FFE8EA;
  --color-warning:      #E07A00;
  --color-warning-bg:   #FFF3CD;
  --color-info:         #0FA3B1;
  --color-info-bg:      #E0F7FA;

  /* Borders */
  --color-border:       #DDD5C8;   /* subtle warm border */
  --color-border-dark:  #3A3228;   /* border on dark sections */
  --color-border-gold:  #F7931A66; /* semi-transparent gold border */

  /* ── Typography ─────────────────────────────────────────── */
  --font-heading:  'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */

  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  --line-tight:   1.2;
  --line-snug:    1.4;
  --line-normal:  1.6;
  --line-relaxed: 1.8;

  --letter-tight:  -0.02em;
  --letter-normal:  0em;
  --letter-wide:    0.04em;
  --letter-wider:   0.08em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout ──────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1400px;

  --header-height:  68px;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.14);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.18);
  --shadow-gold: 0 4px 24px rgba(247,147,26,0.25);
  --shadow-gold-lg: 0 8px 48px rgba(247,147,26,0.35);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:     0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-header:   1000;
  --z-top:      9999;

}