/* ============================================================
   Neumorphism (Soft UI) — Design Tokens
   Cool-grey monochrome surface; depth from dual RGBA shadows.
   Functional colors (gender, behavior, noise) are retained.
   ============================================================ */

:root {
  /* --- grid used by the JS seat-snapping logic --- */
  --grid-size: 20px;

  /* --- neumorphic palette (cool grey) --- */
  --background: #E0E5EC;        /* the single "cool clay" surface */
  --foreground: #3D4852;        /* primary text, 7.5:1 on background */
  --muted: #E0E5EC;             /* surfaces match the background */
  --muted-foreground: #5A6570;  /* secondary text, ~4.7:1 on background (AA) */
  --accent: #5B54E0;            /* interactive highlights — AA as text, 5.6:1 w/ white */
  --accent-light: #8B84FF;      /* hover / gradient accents (background only) */
  --accent-foreground: #FFFFFF;
  --success-color: #1E6363;     /* teal — positive indicators (5.5:1 text) */
  --danger-color: #B91C1C;      /* red (AA text) */
  --danger-hover: #991B1B;
  --warning-color: #92400E;     /* orange (5.6:1 text) */
  --neutral-color: #6B7280;

  /* functional colors (kept by user choice) — darkened for AA text contrast */
  --male-color: #1D4ED8;
  --female-color: #7E22CE;

  /* --- borders: neumorphism never borders; shadows define edges --- */
  --border: transparent;
  --border-light: transparent;

  /* --- dual RGBA shadows (the physics) --- */
  --shadow-extruded: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5);
  --shadow-extruded-hover: 12px 12px 20px rgb(163,177,198,0.7), -12px -12px 20px rgba(255,255,255,0.6);
  --shadow-extruded-sm: 5px 5px 10px rgb(163,177,198,0.6), -5px -5px 10px rgba(255,255,255,0.5);
  --shadow-inset: inset 6px 6px 10px rgb(163,177,198,0.6), inset -6px -6px 10px rgba(255,255,255,0.5);
  --shadow-inset-deep: inset 10px 10px 20px rgb(163,177,198,0.7), inset -10px -10px 20px rgba(255,255,255,0.6);
  --shadow-inset-sm: inset 3px 3px 6px rgb(163,177,198,0.6), inset -3px -3px 6px rgba(255,255,255,0.5);
  --shadow-accent: inset 4px 4px 8px rgb(83,74,214,0.55), inset -4px -4px 8px rgba(255,255,255,0.25);

  /* --- typography --- */
  --font-display: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;

  /* --- geometry: soft, pillowed --- */
  --radius-container: 32px;
  --radius-base: 16px;
  --radius-inner: 12px;
  --radius-full: 9999px;
  --radius: var(--radius-base);

  /* --- motion --- */
  --transition: 300ms ease-out;

  /* --- textures: none (depth comes from shadows) --- */
  --texture-lines: none;
  --texture-grid: none;
  --texture-noise: none;
}