/* ============================================================
   Diamond Gaming UI — Colors & Type
   Dark-first design system for technical products
   ============================================================ */

/* Fonts
   - Poppins (display): local .ttf files under /fonts (brand-provided)
   - Inter (body) + JetBrains Mono (mono): Google Fonts CDN — open-source */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Poppins — local @font-face ---------- */
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Thin.ttf') format('truetype');           font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');     font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');     font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Light.ttf') format('truetype');          font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-LightItalic.ttf') format('truetype');    font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.ttf') format('truetype');        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Italic.ttf') format('truetype');         font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.ttf') format('truetype');         font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');   font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.ttf') format('truetype');       font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.ttf') format('truetype');           font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');     font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');      font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Black.ttf') format('truetype');          font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');    font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- BACKGROUNDS ---------- */
  --bg-default: #070D24;   /* deepest navy — page background */
  --bg-raised: #0A183D;    /* one step up — panels, sticky chrome */
  --surface: #101D45;      /* cards, modals, popovers */
  --surface-2: #16245A;    /* hover/active surfaces, table row alt */
  --border: #20366F;       /* default border across components */
  --border-strong: #2B4691;
  --border-subtle: #182A5E;

  /* ---------- BRAND / ACTION ---------- */
  --primary: #1565FF;      /* action blue — buttons, links */
  --primary-hover: #2B78FF;
  --primary-press: #0F50CC;
  --accent: #00E5FF;       /* focus cyan — outlines, highlights */
  --accent-hover: #33EBFF;
  --purple: #7B61FF;       /* secondary brand, charts */
  --magenta: #FF4DFF;      /* detail only — avoid as primary action */

  /* ---------- SEMANTIC STATUS ---------- */
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.14);
  --warning: #FACC15;
  --warning-bg: rgba(250, 204, 21, 0.14);
  --error: #F4445E;
  --error-bg: rgba(244, 68, 94, 0.14);
  --info: #00E5FF;
  --info-bg: rgba(0, 229, 255, 0.14);
  --neutral: #7C8AB5;
  --neutral-bg: rgba(124, 138, 181, 0.18);

  /* ---------- DATA VIZ ----------
     Categorical palette (use in order for unlabelled series).
     Sequential = single-hue ramp for heatmaps/intensity.
     Diverging = paired endpoints for ±delta maps. */
  --viz-1: #1565FF;  /* primary blue */
  --viz-2: #00E5FF;  /* accent cyan */
  --viz-3: #7B61FF;  /* purple */
  --viz-4: #22C55E;  /* success green */
  --viz-5: #FACC15;  /* warning yellow */
  --viz-6: #FF4DFF;  /* magenta — detail/category 6 only */
  --viz-7: #F4445E;  /* error red — only if categorical demands it */
  --viz-8: #7C8AB5;  /* neutral grey */

  --viz-grid: rgba(43, 70, 145, 0.45);   /* gridlines on dark */
  --viz-axis: #7C8AB5;                   /* axis labels */
  --viz-tooltip-bg: #16245A;             /* tooltip surface */

  /* ---------- TEXT ---------- */
  --text-primary: #F2F5FF;
  --text-secondary: #B7C2E0;
  --text-muted: #7C8AB5;
  --text-disabled: #4A5784;
  --text-on-primary: #FFFFFF;
  --text-on-accent: #03121F;

  /* Editable-field well — low-contrast inset that adapts to any panel.
     Use for editable grid cells so dense tables stay calm (not --bg-default,
     which is too dark against --surface). */
  --field-well: rgba(0, 0, 0, 0.16);
  --field-well-hover: rgba(0, 0, 0, 0.24);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Poppins', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Type scale (size / line-height / weight) */
  --type-page-size: 24px;       --type-page-lh: 32px;     --type-page-weight: 600;
  --type-section-size: 18px;    --type-section-lh: 28px;  --type-section-weight: 600;
  --type-body-size: 14px;       --type-body-lh: 22px;     --type-body-weight: 400;
  --type-body-strong-weight: 600;
  --type-caption-size: 12px;    --type-caption-lh: 18px;  --type-caption-weight: 400;
  --type-overline-size: 11px;   --type-overline-lh: 16px; --type-overline-weight: 600;

  /* Display sizes (used sparingly — hero numbers, login titles) */
  --type-display-size: 40px;    --type-display-lh: 48px;  --type-display-weight: 700;

  /* ---------- SPACING ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ---------- RADIUS ---------- */
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-pill: 999px;

  /* ---------- SHADOWS / GLOWS ---------- */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --glow-focus: 0 0 0 3px rgba(0, 229, 255, 0.25);
  --glow-primary: 0 0 0 3px rgba(21, 101, 255, 0.25);
  --glow-error: 0 0 0 3px rgba(244, 68, 94, 0.20);

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --container-default: 1200px;
  --grid-cols-desktop: 12;
  --grid-cols-mobile: 4;
  --grid-gutter: var(--space-lg);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg-default);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-page-size);
  line-height: var(--type-page-lh);
  font-weight: var(--type-page-weight);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-section-size);
  line-height: var(--type-section-lh);
  font-weight: var(--type-section-weight);
  color: var(--text-primary);
  margin: 0;
}

p, .body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--text-secondary);
  margin: 0;
}

small, .caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--text-muted);
}

.overline {
  font-size: var(--type-overline-size);
  line-height: var(--type-overline-lh);
  font-weight: var(--type-overline-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 13px;
}