/* ============================================================
   BJI Design Tokens (v2)
   Future site-wide layer. Consumed by casino-v2.css in phase 1.
   Prefix: --bji-*  (legacy --wpg-* vars are unrelated and untouched)
   ============================================================ */

:root {

  /* ---- Brand color scale (derived from #0698ff / #0e1638) ---- */
  --bji-blue-050: #eef7ff;
  --bji-blue-100: #d9edff;
  --bji-blue-200: #b3dbff;
  --bji-blue-300: #7cc2ff;
  --bji-blue-400: #3ea7ff;
  --bji-blue-500: #0698ff;   /* brand primary */
  --bji-blue-600: #0079d6;
  --bji-blue-700: #005ea8;
  --bji-blue-800: #004c88;
  --bji-blue-900: #0a3560;

  --bji-navy-700: #1c2b57;
  --bji-navy-800: #131e42;
  --bji-navy-900: #0e1638;   /* brand deep navy */
  --bji-navy-950: #090f26;

  /* ---- Neutrals (cool gray) ---- */
  --bji-gray-000: #ffffff;
  --bji-gray-050: #f6f8fb;
  --bji-gray-100: #eef1f6;
  --bji-gray-200: #dde3ec;
  --bji-gray-300: #c3ccda;
  --bji-gray-400: #9aa5b8;
  --bji-gray-500: #71809b;
  --bji-gray-600: #5c6279;
  --bji-gray-700: #454b61;
  --bji-gray-800: #2e3348;
  --bji-gray-900: #1d2133;

  /* ---- Feedback ---- */
  --bji-green-100: #ddf5e4;
  --bji-green-500: #1fa254;
  --bji-green-600: #178546;
  --bji-green-700: #116a38;
  --bji-amber-100: #fdf3d9;
  --bji-amber-500: #e9a213;
  --bji-amber-700: #9a6a06;
  --bji-red-100: #fde3e3;
  --bji-red-500: #dd3d3d;
  --bji-red-700: #a82424;

  /* ---- Rating bands ---- */
  --bji-rating-great: #1fa254;
  --bji-rating-good: #7bb43c;
  --bji-rating-average: #e9a213;
  --bji-rating-poor: #e06a1f;
  --bji-rating-terrible: #dd3d3d;

  /* ---- Semantic roles ---- */
  --bji-surface: var(--bji-gray-000);
  --bji-surface-sunken: var(--bji-gray-050);
  --bji-surface-raised: var(--bji-gray-000);
  --bji-surface-inverse: var(--bji-navy-900);
  --bji-border: var(--bji-gray-200);
  --bji-border-strong: var(--bji-gray-300);
  --bji-text: var(--bji-gray-900);
  --bji-text-muted: var(--bji-gray-600);
  --bji-text-faint: var(--bji-gray-500);
  --bji-text-inverse: #f2f6fc;
  --bji-text-inverse-muted: #aab6cf;
  --bji-link: var(--bji-blue-600);
  --bji-link-hover: var(--bji-blue-700);
  --bji-brand: var(--bji-blue-500);

  /* CTA: conversion actions (Claim Bonus / Play Now) */
  --bji-cta: var(--bji-green-500);
  --bji-cta-hover: var(--bji-green-600);
  --bji-cta-text: #ffffff;

  /* ---- Typography ---- */
  --bji-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --bji-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale (360px -> 1280px viewports) */
  --bji-text-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --bji-text-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --bji-text-base: clamp(0.95rem, 0.91rem + 0.20vw, 1.06rem);
  --bji-text-lg:   clamp(1.08rem, 1.03rem + 0.26vw, 1.22rem);
  --bji-text-xl:   clamp(1.26rem, 1.18rem + 0.38vw, 1.48rem);
  --bji-text-2xl:  clamp(1.52rem, 1.38rem + 0.62vw, 1.88rem);
  --bji-text-3xl:  clamp(1.85rem, 1.62rem + 1.00vw, 2.42rem);
  --bji-text-4xl:  clamp(2.20rem, 1.86rem + 1.50vw, 3.05rem);

  --bji-leading-tight: 1.2;
  --bji-leading-snug: 1.35;
  --bji-leading-body: 1.65;

  --bji-weight-regular: 400;
  --bji-weight-medium: 500;
  --bji-weight-semibold: 600;
  --bji-weight-bold: 700;
  --bji-weight-black: 800;

  /* ---- Spacing scale ---- */
  --bji-space-1: 0.25rem;
  --bji-space-2: 0.5rem;
  --bji-space-3: 0.75rem;
  --bji-space-4: 1rem;
  --bji-space-5: 1.5rem;
  --bji-space-6: 2rem;
  --bji-space-7: 3rem;
  --bji-space-8: 4rem;
  --bji-space-9: 6rem;

  /* Fluid section rhythm */
  --bji-section-gap: clamp(2.5rem, 2rem + 3vw, 5rem);

  /* ---- Layout ---- */
  --bji-content-width: 72rem;      /* 1152px main column */
  --bji-prose-width: 46rem;        /* readable prose measure */
  --bji-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* ---- Radius ---- */
  --bji-radius-sm: 6px;
  --bji-radius-md: 10px;
  --bji-radius-lg: 16px;
  --bji-radius-xl: 24px;
  --bji-radius-pill: 999px;

  /* ---- Elevation ---- */
  --bji-shadow-sm: 0 1px 2px rgb(14 22 56 / 0.06), 0 1px 3px rgb(14 22 56 / 0.08);
  --bji-shadow-md: 0 2px 6px rgb(14 22 56 / 0.06), 0 8px 24px rgb(14 22 56 / 0.10);
  --bji-shadow-lg: 0 4px 12px rgb(14 22 56 / 0.08), 0 20px 48px rgb(14 22 56 / 0.16);

  /* ---- Motion ---- */
  --bji-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --bji-duration-fast: 120ms;
  --bji-duration: 200ms;
}