/* =========================================================================
   Antifraud — Colors & Type Foundations
   Source of truth for the iGaming Anti-Fraud SaaS brand.
   Extracted from marketing/landing/index.html and apps/dashboard/* (Tailwind
   theme + base templates).
   ========================================================================= */

:root {
  /* ----- Surface / Structural ------------------------------------------- */
  --bg:           #0b0d12;   /* root background — landing */
  --bg-2:         #0f1219;   /* deeper sunken surface */
  --bg-app:       #030712;   /* dashboard root (gray-950) */
  --panel:        #141823;   /* elevated card / nav surface */
  --panel-2:      #111827;   /* dashboard panel (gray-900) */
  --panel-3:      #1f2937;   /* dashboard panel-2 (gray-800) */
  --line:         #1f2533;   /* default 1px border */
  --line-2:       #2a3146;   /* hover border */
  --line-app:     #1f2937;   /* dashboard divider (gray-800) */

  /* ----- Foreground / Text ---------------------------------------------- */
  --text:         #e7eaf2;   /* primary text on dark */
  --text-2:       #f3f4f6;   /* gray-100 — dashboard primary */
  --text-3:       #d1d5db;   /* gray-300 — secondary */
  --muted:        #8a93a6;   /* meta, captions */
  --muted-2:      #9ca3af;   /* gray-400 */
  --muted-3:      #6b7280;   /* gray-500 — placeholder */
  --muted-4:      #4b5563;   /* gray-600 — divider text */

  /* ----- Brand ---------------------------------------------------------- */
  --accent:       #00d094;   /* signature mint-green — "ALLOW" / brand */
  --accent-hi:    #1bdda0;   /* hover */
  --accent-dark:  #0aa073;   /* deep brand */
  --accent-2:     #7c5cff;   /* secondary violet — gradient + nodes */
  --emerald-400:  #34d399;   /* dashboard text accent */
  --emerald-300:  #6ee7b7;   /* hover */
  --emerald-600:  #059669;   /* solid CTA */
  --emerald-500:  #10b981;   /* focus ring */

  /* ----- Semantic decision palette -------------------------------------- */
  --allow:        #00d094;
  --review:       #ffb74d;   /* warn — amber */
  --block:        #ff5a6e;   /* danger — coral red */
  --warn:         #ffb74d;
  --danger:       #ff5a6e;
  --info:         #7c5cff;

  /* ----- Tinted fills (used as 10–18% of accent over dark) -------------- */
  --tint-allow:   color-mix(in srgb, var(--allow)  15%, transparent);
  --tint-review:  color-mix(in srgb, var(--review) 15%, transparent);
  --tint-block:   color-mix(in srgb, var(--block)  15%, transparent);
  --tint-info:    color-mix(in srgb, var(--info)   15%, transparent);
  --tint-allow-bd:  color-mix(in srgb, var(--allow)  35%, transparent);
  --tint-review-bd: color-mix(in srgb, var(--review) 30%, transparent);
  --tint-block-bd:  color-mix(in srgb, var(--block)  30%, transparent);

  /* ----- Code-syntax (used in code blocks) ------------------------------ */
  --code-bg:      #0a0c10;
  --code-fg:      #cdd4e4;
  --tk-key:       #7c9aff;
  --tk-str:       #9bdc8a;
  --tk-num:       #ffb074;
  --tk-com:       #5d6679;
  --tk-fn:        #c084ff;

  /* ----- Radii / Shadow / Spacing scales -------------------------------- */
  --radius-sm:    6px;
  --radius:       10px;
  --radius-md:    14px;       /* canonical card radius */
  --radius-lg:    24px;       /* moat / cta block */
  --radius-pill:  999px;

  --shadow-card:  0 30px 80px -30px rgba(0,0,0,.6);
  --shadow-pop:   0 20px 25px -5px rgb(0 0 0 / .35), 0 8px 10px -6px rgb(0 0 0 / .25);

  --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-24: 96px;

  /* ----- Layout --------------------------------------------------------- */
  --container-max: 1180px;
  --nav-h: 64px;

  /* ----- Type fundamentals --------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-19: 19px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-34: 34px;
  --fs-40: 40px;
  --fs-60: 60px;

  --lh-tight:  1.04;
  --lh-snug:   1.15;
  --lh-normal: 1.55;

  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.025em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semi:     600;
  --weight-bold:     700;
}

/* =========================================================================
   Base / element-level type
   ========================================================================= */
html, body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
code, pre, .mono { font-family: var(--font-mono); }

/* =========================================================================
   Semantic type roles — classes you can apply directly
   ========================================================================= */

/* Display — hero headline */
.t-display {
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}

/* H1 — page title in app */
.t-h1 {
  font-size: var(--fs-30);
  line-height: 1.1;
  letter-spacing: var(--tracking-tighter);
  font-weight: var(--weight-bold);
}

/* H2 — section heading on landing */
.t-h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}

/* H3 — subsection / card title */
.t-h3 {
  font-size: var(--fs-26);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: var(--weight-bold);
}

/* H4 — tile heading */
.t-h4 {
  font-size: var(--fs-17);
  line-height: 1.3;
  font-weight: var(--weight-semi);
}

/* Lead / kicker — paragraph below headlines */
.t-lead {
  font-size: var(--fs-19);
  line-height: 1.5;
  color: var(--muted);
}
.t-kicker {
  font-size: var(--fs-17);
  line-height: 1.5;
  color: var(--muted);
}

/* Body / paragraph */
.t-body  { font-size: var(--fs-16); line-height: var(--lh-normal); }
.t-body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--text-3); }
.t-meta  { font-size: var(--fs-13); line-height: 1.4; color: var(--muted); }
.t-micro { font-size: var(--fs-12); line-height: 1.4; color: var(--muted); }

/* Eyebrow / overline — pill-style label, all-caps, accent green */
.t-eyebrow {
  display: inline-block;
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--weight-semi);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tint-allow-bd);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Section eyebrow on dashboard panels (no pill) */
.t-section-label {
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: var(--weight-semi);
  color: var(--muted);
}

/* Metric value (giant number on stat card) */
.t-metric {
  font-size: var(--fs-34);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
}
.t-metric small {
  font-size: var(--fs-14);
  font-weight: var(--weight-medium);
  color: var(--muted);
  margin-left: 4px;
}

/* Code — inline + block */
.t-code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.t-code-block {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--code-fg);
  background: var(--code-bg);
}

/* Mono tag — small monospace label like in the live feed signal-tag */
.t-mono-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-semi);
}

/* Gradient inline — used on the word "margin." in hero */
.t-gradient {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}