/* The only file allowed to hold colour literals (build gate enforces this).
   PROVENANCE — every value is sampled from the supplied assets, none invented:
   --color-accent  #71dfff  modal opaque pixel of brand/LOGO LOWBID PNG.png (3,728,621 of 4,000,000 px)
   --color-ink     #050d14  modal glyph pixel of brand/LOGO LOWBID PNG.png (the "L" stroke)
   --color-bg      #010a13  modal pixel of the top-left corner of reference/SAMPUL LOWBID JPG.jpg.jpeg
   --color-text    #fcfcfc  modal headline-white pixel of the same banner
   --color-muted   #ccd1d7  modal subtitle-grey pixel of the same banner
   --color-panel   #012839  modal chart-panel pixel of the same banner
   Every other colour below is color-mix() of those six, never a new literal.
   Deviation noted: the brief's "#00ffcc" pulse is replaced by --color-accent (palette rule outranks it). */
:root {
  --color-accent: #71dfff;
  --color-ink: #050d14;
  --color-bg: #010a13;
  --color-text: #fcfcfc;
  --color-muted: #ccd1d7;
  --color-panel: #012839;

  --surface: color-mix(in srgb, var(--color-panel) 38%, var(--color-bg));
  --surface-2: color-mix(in srgb, var(--color-panel) 72%, var(--color-bg));
  --surface-3: color-mix(in srgb, var(--color-accent) 14%, var(--surface-2));
  --border: color-mix(in srgb, var(--color-muted) 18%, var(--color-bg));
  --border-soft: color-mix(in srgb, var(--color-muted) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--color-muted) 32%, var(--color-bg));
  --text: var(--color-text);
  --text-muted: var(--color-muted);
  --text-faint: color-mix(in srgb, var(--color-muted) 62%, var(--color-bg));
  --accent-hover: color-mix(in srgb, var(--color-accent) 80%, var(--color-text));
  --accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--color-accent) 35%, transparent);
  --accent-glow: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --shadow-lg: 0 24px 64px -16px color-mix(in srgb, var(--color-ink) 90%, transparent);

  /* radii / spacing / type scale: measured from the reference stylesheet */
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-full: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --fs-display: 56px; --lh-display: 58px; --fs-h2: 28px; --lh-h2: 32px; --fs-h3: 16px; --lh-h3: 24px;
  --fs-stat: 20px; --lh-stat: 28px; --fs-deal: 40px; --lh-deal: 44px; --fs-lead: 18px; --lh-lead: 28px;
  --fs-body: 16px; --lh-body: 24px; --fs-ui: 14px; --lh-ui: 20px; --fs-meta: 13px; --lh-meta: 18px; --fs-label: 12px; --lh-label: 16px;
  --control-sm: 32px; --control-md: 40px; --control-lg: 48px; --tap: 44px;
  --container: 1200px; --gutter: clamp(16px, 4vw, 32px); --section: 96px; --header-h: 64px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms; --t-chev: 160ms;
  color-scheme: dark;
}
@media (width <= 767px) {
  :root { --section: 64px; --fs-display: 36px; --lh-display: 40px; --fs-h2: 24px; --lh-h2: 28px; --fs-deal: 28px; --lh-deal: 32px; --fs-lead: 16px; --lh-lead: 24px; }
}