/* ==========================================================================
   DESIGN TOKENS — Dron Centar
   Dark charcoal / off-white / graphite + single electric-blue accent.
   Yellow is reserved for the logo mark only — never used as a UI accent
   (see design-system notes shared alongside this project).
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --color-bg: #0b0d10;            /* near-black charcoal, page background */
  --color-bg-alt: #101317;        /* slightly lifted background band */
  --color-surface: #14171b;       /* cards, panels */
  --color-surface-alt: #1a1e23;   /* hover / elevated surface */
  --color-border: #262b31;        /* hairlines, dividers */
  --color-border-strong: #33393f;

  /* ---- Color: text ---- */
  --color-text: #f4f5f6;          /* off-white primary text */
  --color-text-muted: #9aa1a9;    /* steel gray secondary text */
  --color-text-faint: #7d8590;    /* tertiary / labels — WCAG AA vs. bg (5.2:1) and surface (4.8:1) */

  /* ---- Color: accent (single accent system) ----
     --color-accent is the saturated brand blue: used for solid backgrounds
     (buttons) and borders/decorative lines, where WCAG's 3:1 non-text
     contrast applies. White text on --color-accent = 4.5:1 (AA).
     --color-accent-on-dark is a lighter tint of the same hue, used only
     when the accent color itself is rendered as TEXT directly on the dark
     page background (eyebrows, links, counters) — 6.5:1 (AA) there. */
  --color-accent: #2f6fef;         /* electric blue — backgrounds / borders */
  --color-accent-strong: #1b4fd1;  /* hover / active (buttons) */
  --color-accent-soft: rgba(47, 111, 239, 0.12); /* tinted backgrounds */
  --color-accent-text: #eaf1ff;    /* text/selection color on top of accent backgrounds */
  --color-accent-on-dark: #5c92ff; /* accent-as-text on --color-bg / --color-surface */

  /* ---- Color: functional ---- */
  --color-success: #2fbf71;
  --color-warning: #e0a52c;
  --color-error: #e5484d;

  /* ---- Typography ---- */
  --font-heading: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --fs-2xs: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
  --fs-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --fs-md:  clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);
  --fs-lg:  clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
  --fs-xl:  clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  --fs-3xl: clamp(3rem, 2.3rem + 3.2vw, 5rem);
  --fs-4xl: clamp(3.75rem, 2.6rem + 5vw, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ---- Spacing scale (fluid) ---- */
  --space-1: clamp(0.5rem, 0.47rem + 0.15vw, 0.625rem);
  --space-2: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --space-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --space-4: clamp(2rem, 1.7rem + 1.2vw, 2.75rem);
  --space-5: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  --space-6: clamp(4.5rem, 3.4rem + 4.4vw, 7.5rem);
  --space-7: clamp(6rem, 4.4rem + 6.4vw, 10rem);

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-wide: 1680px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur-base: 0.32s;
  --dur-slow: 0.6s;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* ---- Header ---- */
  --header-h: 84px;
  --header-h-compact: 64px;
}