/* FlowLogic Solutions - design tokens (dark navy May-spirit)
   PIVOT 2026-09-14: paper/beige rejected. Dark charcoal-navy + cyan->blue.
   Fonts: Inter (body + display). Radius scale + exactly 3 dark shadows. */

:root {
  /* Dark neutrals - each has a job (navy-leaning charcoal family) */
  --color-paper: #161A1F;          /* page ground (deepened navy-charcoal) */
  --color-surface: #1C1F22;        /* cards / elevated surfaces */
  --color-surface-2: #25282D;      /* tertiary panels / inputs */
  --color-ink: #FFFFFF;            /* primary text */
  --color-muted: #A0AAB2;          /* secondary text */
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  /* May-spirit aliases */
  --bg-main: #1C1F22;
  --bg-light: #25282D;
  --bg-dark: #161A1F;

  /* Brand accents (full brightness on dark) */
  --color-cyan: #00FFD1;
  --color-cyan-bright: #00FFD1;
  --color-cyan-soft: #00C9A8;
  --color-blue: #0088FF;
  --color-blue-deep: #0066CC;
  --color-teal: #00C9A8;           /* readable accent on dark (was #0A7F7A on paper) */

  --primary-cyan: #00FFD1;
  --primary-blue: #0088FF;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--primary-cyan) 0%, var(--primary-blue) 100%);
  --gradient-brand-hover: linear-gradient(135deg, #33FFDD 0%, #339EFF 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(0, 255, 209, 0.14) 0%, rgba(0, 136, 255, 0.12) 100%);
  --gradient-section: linear-gradient(135deg, rgba(0, 255, 209, 0.92) 0%, rgba(0, 136, 255, 0.92) 100%);
  --gradient-underline: linear-gradient(90deg, var(--primary-cyan), var(--primary-blue));

  /* Typography - Inter for May feel on dark */
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.25rem, 4vw, 3.25rem);
  --text-4xl: clamp(2.75rem, 6vw, 4.25rem);

  /* Radius scale (control / card / pill) */
  --radius-control: 6px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* Exactly THREE shadow elevations - soft, layered, navy-tinted (NOT flat black blur) */
  --shadow-low:
    0 1px 2px rgba(8, 12, 18, 0.45),
    0 2px 8px rgba(14, 28, 48, 0.28);
  --shadow-med:
    0 2px 4px rgba(8, 12, 18, 0.50),
    0 8px 24px rgba(10, 24, 44, 0.42),
    0 0 0 1px rgba(0, 136, 255, 0.04);
  --shadow-high:
    0 4px 10px rgba(8, 12, 18, 0.55),
    0 18px 48px rgba(8, 22, 40, 0.55),
    0 0 0 1px rgba(0, 255, 209, 0.06);

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --container: 1120px;
  --container-wide: 1280px;

  --header-h: 7.5rem;
  --focus-ring: 0 0 0 3px rgba(0, 255, 209, 0.35);
}