/*
  Prototyper Design System Tokens
  Uses --proto- prefix to avoid conflicts with project CSS
*/

:root {
  /* Root font size */
  font-size: 62.5%; /* 1rem = 10px */

  /* Colors */
  --proto-bg-dark: #0a0a0a;
  --proto-bg-light: #f5f5f5;
  --proto-bg-dark-lighter: #1a1a1a;
  --proto-bg-dark-lightest: #2a2a2a;

  /* references projects tokens, but can be adapted on its own */
  --proto-primary: #22c55e; /* var(--primary,  #22c55e); fallback*/
  --proto-action: #22c55e; /* dedicated action color for certain ui element */
  --proto-primary-hover: #03792e; /* var(--primary-d-1) */
  --proto-primary-light: rgba(34, 197, 94, 0.3); /* var(--primary-30) */
  --proto-primary-border: #03792e; /* var(--primary-d1) */

  --proto-text-primary: #ffffff;
  --proto-text-secondary: #a3a3a3;
  --proto-text-muted: #737373;

  --proto-border: rgba(255, 255, 255, 0.1);
  --proto-border-hover: rgba(255, 255, 255, 0.2);

  --proto-accent: #3b82f6;
  --proto-danger: #ef4444;
  --proto-warning: #f59e0b;

  /* Typography */
  --proto-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --proto-text-4xs: 1rem;
  --proto-text-3xs: 1.1rem;
  --proto-text-2xs: 1.2rem;
  --proto-text-xs: 1.3rem;
  --proto-text-s: 1.4rem;
  --proto-text-m: 1.6rem;
  --proto-text-l: 1.8rem;
  --proto-text-xl: 2rem;
  --proto-text-2xl: 2.4rem;
  --proto-text-3xl: 3rem;

  /* Spacing */
  --proto-space-3xs: 0.2rem;
  --proto-space-2xs: 0.4rem;
  --proto-space-xs: 0.6rem;
  --proto-space-s: 0.8rem;
  --proto-space-m: 1.2rem;
  --proto-space-l: 1.6rem;
  --proto-space-xl: 2rem;
  --proto-space-2xl: 2.4rem;
  --proto-space-3xl: 3.2rem;
  --proto-space-4xl: 4rem;
  --proto-space-5xl: 4.8rem;
  --proto-space-6xl: 6.4rem;

  /* Border Radius */
  --proto-radius-xs: 0.3rem;
  --proto-radius-s: 0.4rem;
  --proto-radius-m: 0.6rem;
  --proto-radius-l: 0.8rem;
  --proto-radius-xl: 1.2rem;
  --proto-radius-full: 999rem;

  /* Shadows */
  --proto-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.3);
  --proto-shadow-m: 0 4px 6px rgba(0, 0, 0, 0.3);
  --proto-shadow-l: 0 10px 15px rgba(0, 0, 0, 0.4);
  --proto-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);

  /* Transitions */
  --proto-transition-fast: 0.15s ease;
  --proto-transition-base: 0.3s ease;
  --proto-transition-slow: 0.5s ease;

  /* Z-index */
  --proto-z-sidebar: 100;
  --proto-z-toggle: 200;
  --proto-z-modal: 300;
}