/* GuardRAIl Design Tokens - Unified Design System */
/* Inspired by: Google Classroom, Canvas, Schoology, Seesaw, ClassDojo */
/* Light mode by default, dark mode via [data-theme="dark"] */

:root {
  /* === TYPOGRAPHY === */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', 'Helvetica Neue', system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Typography Scale */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 48px;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* === RADIUS === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* === SPACING (8-point grid) === */
  --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;
  --space-16: 64px;

  /* === TRANSITIONS === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === LIGHT THEME === */
  --color-background: #FFFFFF;
  --color-background-alt: #F8F9FA;
  --color-background-subtle: #F1F3F5;
  --color-foreground: #1C1E21;
  --color-foreground-muted: #65676B;
  --color-foreground-subtle: #8A8D91;
  
  /* Primary - Guardrail Blue */
  --color-primary: #1877F2;
  --color-primary-hover: #166FE5;
  --color-primary-active: #1460CC;
  --color-primary-light: #E7F3FF;
  --color-primary-lighter: #F0F8FF;
  
  /* Secondary - Success Green */
  --color-secondary: #42B72A;
  --color-secondary-hover: #36A420;
  --color-secondary-active: #2D8A1A;
  --color-secondary-light: #E6F7E1;
  --color-secondary-lighter: #F0F9ED;
  
  /* Accent - Warm Orange */
  --color-accent: #F25C05;
  --color-accent-hover: #E05505;
  --color-accent-active: #CC4D04;
  --color-accent-light: #FFF4E6;
  --color-accent-lighter: #FFF9F0;
  
  /* Semantic Colors */
  --color-success: #42B72A;
  --color-success-light: #E6F7E1;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error: #E41E3F;
  --color-error-light: #FFE3E8;
  --color-info: #1877F2;
  --color-info-light: #E7F3FF;
  
  /* Neutral Colors */
  --color-muted: #F1F3F5;
  --color-border: #DADDE1;
  --color-border-subtle: #EBEDF0;
  
  /* Surface Colors */
  --color-card: #FFFFFF;
  --color-card-hover: #F8F9FA;
  --color-card-active: #F1F3F5;
  
  /* Stat Colors */
  --color-stat-blue: #1877F2;
  --color-stat-green: #42B72A;
  --color-stat-orange: #F25C05;
  --color-stat-purple: #8B5CF6;
  --color-stat-pink: #EC4899;

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-none: none;
}

/* === DARK THEME === */
[data-theme="dark"] {
  --color-background: #18191A;
  --color-background-alt: #242526;
  --color-background-subtle: #2C2D2E;
  --color-foreground: #E4E6EB;
  --color-foreground-muted: #B0B3B8;
  --color-foreground-subtle: #8A8D91;
  
  --color-primary: #2D88FF;
  --color-primary-hover: #4599FF;
  --color-primary-active: #5CAAFF;
  --color-primary-light: #1A3A5F;
  --color-primary-lighter: #1E2A3A;
  
  --color-secondary: #4CD964;
  --color-secondary-hover: #5FE075;
  --color-secondary-active: #72E786;
  --color-secondary-light: #1E3A2F;
  --color-secondary-lighter: #1F2E24;
  
  --color-accent: #FF6B35;
  --color-accent-hover: #FF7F4D;
  --color-accent-active: #FF9365;
  --color-accent-light: #3D2E1A;
  --color-accent-lighter: #2F2419;
  
  --color-success: #4CD964;
  --color-success-light: #1E3A2F;
  --color-warning: #FFB020;
  --color-warning-light: #3D2E1A;
  --color-error: #FF4757;
  --color-error-light: #3D2323;
  --color-info: #2D88FF;
  --color-info-light: #1A3A5F;
  
  --color-muted: #2C2D2E;
  --color-border: #3A3B3C;
  --color-border-subtle: #2C2D2E;
  
  --color-card: #242526;
  --color-card-hover: #2C2D2E;
  --color-card-active: #363738;
  
  --color-stat-blue: #2D88FF;
  --color-stat-green: #4CD964;
  --color-stat-orange: #FF6B35;
  --color-stat-purple: #A78BFA;
  --color-stat-pink: #F472B6;
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
