/* =============================================
   NoteD Web — Design Tokens
   Mirrors the iOS SwiftUI color palette exactly
   ============================================= */
:root {
  /* === Colors === */
  --color-bg:           #111120;
  --color-surface:      #1E1E30;
  --color-surface2:     #282840;
  --color-surface3:     #32324e;
  --color-border:       rgba(255, 255, 255, 0.07);
  --color-border-hover: rgba(255, 255, 255, 0.14);

  /* Accent */
  --color-accent:        #617FFF;
  --color-accent-rgb:    97, 127, 255;
  --color-purple:        #9459FF;
  --color-purple-rgb:    148, 89, 255;
  --color-green:         #33D98C;
  --color-green-rgb:     51, 217, 140;
  --color-red:           #FF4D4D;
  --color-red-rgb:       255, 77, 77;
  --color-orange:        #FFA633;
  --color-orange-rgb:    255, 166, 51;
  --color-teal:          #40CCE6;

  /* Gradients */
  --gradient-accent:   linear-gradient(135deg, var(--color-accent), var(--color-purple));
  --gradient-green:    linear-gradient(135deg, #33D98C, #1aab6e);
  --gradient-bg:       linear-gradient(180deg, #111120 0%, #0d0d1a 100%);

  /* Text */
  --text-primary:   #F2F2FA;
  --text-secondary: #A6A6BF;
  --text-tertiary:  #636380;

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* === Border Radius === */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);
  --shadow-accent: 0 8px 32px rgba(var(--color-accent-rgb), 0.35);
  --shadow-purple: 0 8px 32px rgba(var(--color-purple-rgb), 0.3);

  /* === Transitions === */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Z-Index === */
  --z-base:    1;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}