/* Wally Theme — zelfde designtaal als de marketing-site:
   grafiet + mint (#12D9B4), Geist, scherpe lijnen.
   Used by landing.html, index.html (app), and admin.html */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Surfaces */
  --bg-primary: #FFFFFF;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F1F3F5;
  --bg-elevated: #FFFFFF;

  /* Borders */
  --border: #E9EAEC;
  --border-light: #F1F3F5;
  --border-focus: rgba(18,217,180,0.40);

  /* Text */
  --text-primary: #111214;
  --text-secondary: #3A404A;
  --text-tertiary: #6B7280;

  /* Brand accent (mint — zelfde als de site) */
  --accent: #12D9B4;
  --accent-hover: #0FB897;
  --accent-ink: #0A8A72;          /* mint-700: accent als TEKST op wit */
  --on-accent: #06231D;           /* donkere tekst óp mint-vlakken */
  --accent-soft: rgba(18,217,180,0.12);
  --accent-glow: rgba(18,217,180,0.18);

  /* Status colors */
  --red: #DC2626;
  --red-soft: rgba(220,38,38,0.08);
  --green: #16A34A;
  --green-soft: rgba(22,163,74,0.08);
  --amber: #D97706;
  --amber-soft: rgba(217,119,6,0.08);
  --blue: #2563EB;
  --blue-soft: rgba(37,99,235,0.08);

  /* Vlakken (voorheen gradients — nu vlak grafiet, zoals het wordmark) */
  --grad-dark: #0B0B0C;
  --grad-accent: #12D9B4;
  --grad-subtle: #FFFFFF;

  /* Glassmorphism */
  --glass: rgba(255,255,255,0.80);
  --glass-border: rgba(17,18,20,0.06);
  --glass-heavy: rgba(255,255,255,0.92);

  /* Spacing & Radius (site-schaal: strakker) */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Shadows (subtieler = scherper) */
  --shadow-sm: 0 1px 2px rgba(17,18,20,0.05);
  --shadow-md: 0 3px 10px rgba(17,18,20,0.07);
  --shadow-lg: 0 10px 32px rgba(17,18,20,0.10);
  --shadow-glow: 0 0 24px rgba(18,217,180,0.14);

  /* Typography */
  --font: 'Geist', 'Inter', -apple-system, 'SF Pro Text', system-ui, sans-serif;
}

/* Base reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Selection */
::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* Smooth scroll */
html { scroll-behavior: smooth; }