/* ============================================================================
   Licita Radar — Design tokens
   Source of truth for brand values: frontend/lib/core/theme/app_theme.dart
   (LicitaColors). Keep the "Brand invariants" block below in sync with it —
   everything else is landing-only and has no Flutter counterpart.
   ========================================================================== */

:root {
  /* ---- Brand invariants (mirror LicitaColors) --------------------------- */
  --brand-green:        #2ecc8a;
  --brand-green-bright: #35d696;
  --brand-green-dark:   #26b87a;
  --brand-teal:         #1a6464;
  --brand-navy:         #0e2d3d;
  --brand-gray:         #8fa8b8;
  --warning:            #e8a020;

  /* ---- Surfaces (dark scale, mirrors LicitaColors dark*) ---------------- */
  --bg:            #091820;
  --bg-deep:       #060f15; /* landing-only: below-background for depth */
  --surface:       #0e2230;
  --surface-alt:   #122840;
  --surface-high:  #183248;
  --border:        #2a4a5c;
  --border-subtle: #1c3444;

  /* ---- Text ------------------------------------------------------------- */
  --text:       #e8f5f0;
  --text-2:     #9abbc8;
  /* Deliberately lighter than LicitaColors.darkTextMuted (#5a7a8a): that value
     lands at 3.3–4.2:1 on these surfaces, under WCAG AA for body text. Measured
     ≥4.7:1 on --bg, --bg-deep, --surface and --surface-alt. */
  --text-muted: #7896a4;

  /* ---- Alpha helpers (for glass surfaces / hairlines) -------------------- */
  --green-a08: rgb(46 204 138 / 0.08);
  --green-a16: rgb(46 204 138 / 0.16);
  --green-a32: rgb(46 204 138 / 0.32);
  --white-a04: rgb(232 245 240 / 0.04);
  --white-a08: rgb(232 245 240 / 0.08);
  --white-a12: rgb(232 245 240 / 0.12);

  /* ---- Gradients -------------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, var(--brand-green-bright), var(--brand-teal));
  --grad-text:  linear-gradient(180deg, #ffffff 0%, #a8ded0 92%);
  --grad-hairline: linear-gradient(
    90deg, transparent, var(--green-a32) 22%, var(--green-a32) 78%, transparent
  );

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 24px 64px -16px rgb(0 0 0 / 0.65);
  --shadow-brand: 0 12px 40px -12px rgb(46 204 138 / 0.45);

  /* ---- Typography ------------------------------------------------------- */
  /* System stack — no webfont request, no CDN (the production host cannot
     reach external registries). Swap for self-hosted woff2 if a brand face
     is chosen later; only these two vars need to change. */
  --font-sans: "Segoe UI Variable Display", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* Fluid scale — 6 steps, 360px → 1440px viewport */
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.19vw, 1.06rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.33vw, 1.31rem);
  --step-2:  clamp(1.35rem, 1.21rem + 0.58vw, 1.69rem);
  --step-3:  clamp(1.6rem, 1.37rem + 0.97vw, 2.15rem);
  --step-4:  clamp(1.9rem, 1.53rem + 1.56vw, 2.75rem);
  --step-5:  clamp(2.3rem, 1.66rem + 2.7vw, 3.8rem);
  --step-6:  clamp(2.5rem, 1.75rem + 3.2vw, 4.35rem);

  /* ---- Spacing (4pt scale) ---------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6rem;    --sp-12: 8rem;

  /* Section rhythm — collapses on small screens */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --measure:   1180px;   /* default content column */
  --measure-narrow: 780px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  --header-h: 68px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}