:root {
  /* Frame */
  --frame-width: 375px;
  --frame-height: 833px;
  --frame-radius: 30px;

  /* State accent colors */
  --green-accent: rgb(0, 195, 127);
  --yellow-accent: rgb(255, 151, 32);
  --red-accent: rgb(245, 10, 10);

  /* State blob colors */
  --green-blob: rgba(43, 212, 153, 0.4);
  --yellow-blob: rgba(255, 189, 113, 0.55);
  --red-blob: rgba(245, 10, 10, 0.25);

  /* Active state (driven by JS, defaults to green) */
  --accent: var(--green-accent);
  --blob-color: var(--green-blob);

  /* Core palette */
  --color-text: #1A1A1A;
  --color-bg: #FFFFFF;
  --color-text-secondary: rgba(26, 26, 26, 0.5);

  /* Glass effect — simulates Figma GLASS (refraction, depth, -45° light) */
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-blur: 12px;
  --glass-saturate: 140%;
  --glass-border-light: rgba(255, 255, 255, 0.55);
  --glass-border-dark: rgba(255, 255, 255, 0.12);
  --glass-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Typography — Inter partout (graisses 400–700 + italiques, alignées sur l’ancien Lora / UI) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: var(--font-sans);

  /* Side padding */
  --side-padding: 30px;
}