/* === TOKENS (global) === */
:root {
  /* == Auto-generated design tokens (consolidated) == */
  /* Palette */
  --color-1: #000;
  --color-2: #fff;
  --color-3: #000000b3;          /*#7b7481*/
  --color-4: #f5f5f5;            /* app background */
  --color-5: #111;               /* primary text */
  --color-6: rgba(255, 255, 255, 0.9);
  --color-7: #e0e0e0;            /* neutral border */
  --color-8: #1976d2;            /* brand / primary */
  --color-9: rgba(0, 0, 0, 0.12);/* subtle border/shadow */
  --color-10: #ff5252;           /* danger */
  --color-11: rgba(25, 118, 210, 0.08); /* brand surface */
  --color-12: #4caf50;           /* success */

  --color-20: #0000005e;         /* translusent black*/

  /* Spacing scale */
  --space-1: 0.125rem; /* 2px */
  --space-2: 0.25rem;  /* 4px */
  --space-3: 0.5rem;   /* 8px */
  --space-4: 0.625rem; /* 10px */
  --space-5: 0.75rem;  /* 12px */
  --space-6: 0.875rem; /* 14px */
  --space-7: 1rem;     /* 16px */
  --space-8: 1.25rem;  /* 20px */
  --space-9: 1.5rem;   /* 24px */
  --space-10: 2rem;    /* 32px */

  /* Radii */
  --radius-1: 0.25rem; /* 4px */
  --radius-2: 0.5rem;  /* 8px */
  --radius-3: 1rem;    /* 16px */
  --radius-4: 9999px;  /* pill */

  /* Shadows */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.12);
  --shadow-2: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-3: inset 0 0 0 1px rgba(0,0,0,0.06);
  --shadow-4: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-5: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-6: 0 0 0 2px rgba(25,118,210,0.15);

  /* Typography base */
  --font-size-base: 1rem; /* 16px */
  --font-size-base-1: 1.25rem; 
  --font-size-base-2: 1.5rem;
  --font-size-base-2: 1.75rem;
  --font-size-base-4: 2rem;
  --line-height-base: 1.5;

}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}