/* ==========================================================================
   Casino Game Control - design tokens
   The ONE place to change the look: colours, fonts, radii, spacing, sizes.
   app.css uses only these variables (no raw colour / radius / spacing values).
   Source: the "Casino Game Control" design canvas (BetFounders).
   ========================================================================== */

/* Fonts are served from /static/fonts (the page CSP only allows same-origin).
   Roboto is one variable file covering weights 400-700; JetBrains Mono is used for ids, codes and numbers. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/roboto-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-500-latin.woff2") format("woff2");
}

:root {
  /* ---- typography ---- */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;   /* base */
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- colours: surfaces ---- */
  --c-bg: #020813;              /* page */
  --c-bg-deep: #01040a;         /* behind modals */
  --c-header: #030d1f;          /* top bar */
  --c-panel: #061633;           /* cards, panels, dialogs */
  --c-inset: #030d1f;           /* inputs, inset boxes */
  --c-row-selected: #0a1d40;    /* selected table row, active nav tab */
  --c-overlay: rgba(1, 4, 10, 0.78);

  /* ---- colours: borders ---- */
  --c-border: #13294f;
  --c-border-strong: #1d3561;
  --c-border-row: #0e2246;

  /* ---- colours: text ---- */
  --c-text: #ffffff;
  --c-text-2: #ced5e0;
  --c-text-muted: #a3afc2;
  --c-text-dim: #8592a8;

  /* ---- colours: accent (BetFounders orange) ---- */
  --c-accent: #faa21b;
  --c-accent-hover: #ffc46b;
  --c-accent-soft: #3a2a0f;
  --c-on-accent: #020813;

  /* ---- colours: success ---- */
  --c-success: #3fa01f;
  --c-success-text: #7cd455;
  --c-success-soft: #10301a;
  --c-success-dot: #48a321;
  --c-on-success: #020813;

  /* ---- colours: danger ---- */
  --c-danger: #d93a3f;
  --c-danger-text: #ff9b9b;
  --c-danger-soft: #3a1418;
  --c-danger-soft-2: #2a1a1e;
  --c-danger-icon: #ff8a8a;
  --c-on-danger: #ffffff;
  --c-on-danger-sub: #ffe1e1;
  --c-danger-sub: #d9a0a0;

  /* ---- border radius ---- */
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-18: 18px;
  --r-pill: 999px;

  /* ---- spacing scale (name = px) ---- */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-72: 72px;

  /* ---- sizes ---- */
  --container: 1200px;
  --h-tap: 44px;        /* minimum touch target */
  --h-control: 48px;    /* inputs, primary buttons */
  --h-control-lg: 52px; /* hero search */
  --h-small: 36px;      /* small buttons, chips */
  --h-row: 56px;        /* table rows */
  --w-card: 420px;      /* login card */
  --w-dialog: 520px;
  --w-hero: 860px;

  /* ---- effects ---- */
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.45);
  --focus-ring: 2px solid var(--c-accent);
}