/* ============================================
   DESIGN TOKENS — VentaFlow SA
   Light technical theme: white + grey + teal/cyan
   Clean, precise, engineering credibility
   ============================================ */

:root {
  /* -- Brand Colors -- */
  --color-primary: #0a8f8f;          /* Deep teal — authority, trust */
  --color-primary-hover: #077070;
  --color-secondary: #0cc0c0;        /* Bright cyan — highlights */
  --color-accent: #0a8f8f;           /* Links, active states */
  --color-accent-hover: #077070;
  --color-highlight: #0a8f8f;        /* CTAs — teal */
  --color-highlight-hover: #077070;

  /* -- Backgrounds -- */
  --bg-main: #ffffff;                /* Clean white */
  --bg-elevated: #f5f7f8;           /* Light grey panels */
  --bg-elevated-hover: #edf0f2;
  --bg-dark: #1a2332;               /* Dark sections (hero, footer) */

  /* -- Text -- */
  --text-primary: #1a2332;           /* Dark charcoal */
  --text-secondary: #5f6b7a;         /* Muted grey */
  --text-dark: #1a2332;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* -- Borders & Glass -- */
  --border-color: #e2e8f0;
  --border-color-dark: rgba(255, 255, 255, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(10, 143, 143, 0.08);

  /* -- Typography -- */
  --font-heading: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;

  /* -- Layout -- */
  --max-width: 1400px;
  --header-height: 72px;
  --section-pad: 100px 5%;

  /* -- Border Radius -- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* -- Transitions -- */
  --ease-fast: 0.2s ease;
  --ease-normal: 0.3s ease;
  --ease-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}