/* =============================================================
   iGamingLeader — Colors & Type Foundations
   A vetted mastermind for senior iGaming executives.
   Premium, dark, direct, boardroom-credible.
   ============================================================= */

/* ---------- Fonts ----------
   Brand display — RECKLESS (serif). One weight: Regular.
   Brand body — BASIER SQUARE (grotesque sans). Full family: Regular /
     Medium / SemiBold / Bold, plus matching italics.
   Mono — JetBrains Mono (Google Fonts). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Reckless';
  src: url('fonts/Reckless-Regular.otf') format('opentype'),
       url('fonts/Reckless-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Basier Square — upright */
@font-face {
  font-family: 'Basier Square';
  src: url('fonts/BasierSquare-Regular.otf') format('opentype'),
       url('fonts/basiersquare-regular-webfont.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basier Square';
  src: url('fonts/BasierSquare-Medium.otf') format('opentype'),
       url('fonts/basiersquare-medium-webfont.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basier Square';
  src: url('fonts/BasierSquare-SemiBold.otf') format('opentype'),
       url('fonts/basiersquare-semibold-webfont.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Basier Square';
  src: url('fonts/BasierSquare-Bold.otf') format('opentype'),
       url('fonts/basiersquare-bold-webfont.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Basier Square — italic */
@font-face {
  font-family: 'Basier Square';
  src: url('fonts/BasierSquare-RegularItalic.otf') format('opentype'),
       url('fonts/basiersquare-regularitalic-webfont.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Basier Square';
  src: url('fonts/BasierSquare-MediumItalic.otf') format('opentype'),
       url('fonts/basiersquare-mediumitalic-webfont.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Basier Square';
  src: url('fonts/BasierSquare-SemiBoldItalic.otf') format('opentype'),
       url('fonts/basiersquare-semibolditalic-webfont.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Basier Square';
  src: url('fonts/BasierSquare-BoldItalic.otf') format('opentype'),
       url('fonts/basiersquare-bolditalic-webfont.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* -------- Brand Core -------- */
  --igl-blue:        #0abfdb; /* primary signal / accents */
  --igl-navy:        #14294d; /* deep navy — structural */
  --igl-ink:         #120f29; /* near-black, warm violet undertone */
  --igl-mist:        #edf0f5; /* light neutral background */

  /* -------- Neutral Scale (cool, slightly cool-violet) -------- */
  --igl-n-0:   #ffffff;
  --igl-n-50:  #f6f8fb;
  --igl-n-100: #edf0f5; /* mist */
  --igl-n-200: #dde2ec;
  --igl-n-300: #c0c7d4;
  --igl-n-400: #8b93a5;
  --igl-n-500: #5d6578;
  --igl-n-600: #3e4558;
  --igl-n-700: #2a3145;
  --igl-n-800: #1b2136;
  --igl-n-900: #14294d; /* navy */
  --igl-n-950: #120f29; /* ink */
  --igl-n-1000:#000000;

  /* -------- Blue Scale (built around #0abfdb) -------- */
  --igl-blue-50:  #e6f9fd;
  --igl-blue-100: #b9eff8;
  --igl-blue-200: #7fe1f1;
  --igl-blue-300: #3dd0e6;
  --igl-blue-400: #0abfdb; /* brand primary */
  --igl-blue-500: #089cb4;
  --igl-blue-600: #066f82;
  --igl-blue-700: #044f5c;
  --igl-blue-800: #033640;
  --igl-blue-900: #02212a;

  /* -------- Semantic — Dark (default) -------- */
  --bg:           var(--igl-n-950);  /* page */
  --bg-elevated:  #1a1936;           /* card / modal */
  --bg-raised:    #23224a;           /* hover / menu */
  --bg-inverse:   var(--igl-mist);

  --fg:           #f4f4fb;
  --fg-muted:     #a8abc4;
  --fg-subtle:    #6b6e8a;
  --fg-inverse:   var(--igl-ink);

  --border:       rgba(255,255,255,0.09);
  --border-strong:rgba(255,255,255,0.18);
  --border-focus: var(--igl-blue-400);

  --accent:       var(--igl-blue-400);
  --accent-fg:    var(--igl-ink);
  --accent-hover: var(--igl-blue-300);

  --success:      #3ddc97;
  --warn:         #f6c343;
  --danger:       #ef4d5d;

  --overlay:      rgba(18, 15, 41, 0.72);

  /* -------- Spacing (4px base) -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -------- Radii (sharp is the rule — never above 8px for UI) -------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;  /* max for buttons / inputs */
  --radius-pill: 999px; /* only for tags / status dots */

  /* -------- Elevation (restrained, almost no drop shadow on dark) -------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px -12px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-3: 0 24px 64px -24px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.35);
  --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--igl-blue-400);

  /* -------- Motion (restrained, never bouncy) -------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emph:     cubic-bezier(0.3, 0.0, 0.0, 1.0);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 420ms;

  /* -------- Type families --------
     --font-display: Reckless — serif, the marquee voice.
     --font-sans: Basier Square — grotesque sans, full family incl. italics.
     --font-mono: JetBrains Mono. */
  --font-display: 'Reckless', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Basier Square', ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-italic: 'Basier Square', ui-sans-serif, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -------- Type scale (desktop; halve steps mobile via clamps) -------- */
  --fs-display:  clamp(44px, 6.2vw, 88px);
  --fs-h1:       clamp(36px, 4.4vw, 60px);
  --fs-h2:       clamp(28px, 3.2vw, 44px);
  --fs-h3:       clamp(22px, 2.2vw, 30px);
  --fs-h4:       20px;
  --fs-lead:     20px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-micro:    12px;
  --fs-eyebrow:  12px;

  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body:    -0.005em;
  --tracking-eyebrow: 0.14em;
  --tracking-caps:    0.06em;

  /* -------- Layout -------- */
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: 24px;
}

/* Light mode — used for docs, PDFs, press materials */
[data-theme="light"] {
  --bg:           var(--igl-mist);
  --bg-elevated:  #ffffff;
  --bg-raised:    #ffffff;
  --bg-inverse:   var(--igl-ink);

  --fg:           var(--igl-ink);
  --fg-muted:     var(--igl-n-500);
  --fg-subtle:    var(--igl-n-400);
  --fg-inverse:   #ffffff;

  --border:       rgba(18,15,41,0.10);
  --border-strong:rgba(18,15,41,0.22);

  --accent:       var(--igl-navy);
  --accent-fg:    #ffffff;
  --accent-hover: var(--igl-blue-500);

  --shadow-1: 0 1px 2px rgba(18,15,41,0.08);
  --shadow-2: 0 10px 28px -14px rgba(18,15,41,0.22), 0 2px 6px rgba(18,15,41,0.08);
  --shadow-3: 0 28px 64px -28px rgba(18,15,41,0.30), 0 6px 14px rgba(18,15,41,0.10);
  --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--igl-navy);
}

/* =============================================================
   Base / reset-ish
   ============================================================= */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

/* =============================================================
   Semantic type classes (use these, don't restyle raw tags)
   ============================================================= */
.t-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
  line-height: 1;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
.t-h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.t-h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.t-lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.t-body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg);
}

.t-small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-micro {
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--fg-muted);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0;
}

.t-caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 500;
}

.t-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
}

/* Divider rule — common boardroom-style hairline */
.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}
.rule--strong { border-top-color: var(--border-strong); }