/* ============================================
   NEUBRUTALISM DESIGN SYSTEM
   Inspired by membrane.io and modern brutalist design
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
  /* ===== COLOR PALETTE ===== */

  /* Backgrounds - Grayscale base */
  --nb-bg-light: #F4F4F4;
  /* Light gray background */
  --nb-bg-white: #FFFFFF;
  /* White cards/sections */
  --nb-bg-dark: #000000;
  /* Black backgrounds */
  --nb-bg-alt: #E8E8E8;
  /* Alternative gray */

  /* Borders - Always solid, never soft */
  --nb-border-gray: #999999;
  /* Medium gray borders */
  --nb-border-dark: #000000;
  /* Black borders (primary) */
  --nb-border-light: #DDDDDD;
  /* Light gray borders */

  /* Text Colors */
  --nb-text-primary: #000000;
  /* Black text */
  --nb-text-secondary: #666666;
  /* Gray text */
  --nb-text-tertiary: #999999;
  /* Light gray text */
  --nb-text-white: #FFFFFF;
  /* White text */

  /* Accent Colors - High contrast with mint green */
  --nb-accent-green: #A0E7E5;
  /* Light mint/seafoam green */
  --nb-accent-red: #FF0000;
  /* Bright red */
  --nb-accent-blue: #0000FF;
  /* Bright blue */
  --nb-accent-yellow: #FFFF00;
  /* Bright yellow */

  /* Course-specific Colors (bold versions) */
  --nb-comp: #FF6B6B;
  /* Red for COMP courses */
  --nb-math: #4ECDC4;
  /* Cyan for MATH courses */
  --nb-premium: #FFE66D;
  /* Yellow for premium */
  --nb-success: #A0E7E5;
  /* Mint green for success */
  --nb-warning: #FFFF00;
  /* Yellow for warnings */
  --nb-danger: #FF0000;
  /* Red for errors */

  /* ===== TYPOGRAPHY ===== */

  /* Font Families - Clean, modern sans-serif */
  --nb-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --nb-font-mono: 'Courier New', Courier, monospace;

  /* Font Sizes */
  --nb-text-xs: 12px;
  --nb-text-sm: 14px;
  --nb-text-base: 16px;
  --nb-text-lg: 18px;
  --nb-text-xl: 24px;
  --nb-text-2xl: 32px;
  --nb-text-3xl: 48px;
  --nb-text-4xl: 64px;

  /* Font Weights */
  --nb-font-normal: 400;
  --nb-font-medium: 500;
  --nb-font-semibold: 600;
  --nb-font-bold: 700;

  /* Line Heights */
  --nb-leading-tight: 1.2;
  --nb-leading-normal: 1.5;
  --nb-leading-relaxed: 1.8;

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

  /* ===== BORDERS ===== */
  --nb-border-thin: 1px;
  --nb-border-normal: 2px;
  --nb-border-thick: 3px;
  --nb-border-extra: 4px;

  /* Border Radius - ALWAYS 0 for Neubrutalism */
  --nb-radius: 0;

  /* ===== SHADOWS - Hard drop shadows only (NO BLUR) ===== */
  --nb-shadow-xs: 1px 1px 0 var(--nb-border-dark);
  --nb-shadow-sm: 2px 2px 0 var(--nb-border-dark);
  --nb-shadow-md: 4px 4px 0 var(--nb-border-dark);
  --nb-shadow-lg: 6px 6px 0 var(--nb-border-dark);
  --nb-shadow-xl: 8px 8px 0 var(--nb-border-dark);
  --nb-shadow-2xl: 12px 12px 0 var(--nb-border-dark);

  /* Colored Shadows for Emphasis */
  --nb-shadow-green: 4px 4px 0 #7DD3D1;
  /* Slightly darker mint for shadow */
  --nb-shadow-red: 4px 4px 0 var(--nb-accent-red);
  --nb-shadow-blue: 4px 4px 0 var(--nb-accent-blue);
  --nb-shadow-yellow: 4px 4px 0 var(--nb-accent-yellow);

  /* ===== TRANSITIONS ===== */
  --nb-transition-fast: 0.1s ease;
  --nb-transition-normal: 0.2s ease;
  --nb-transition-slow: 0.3s ease;

  /* ===== Z-INDEX ===== */
  --nb-z-base: 1;
  --nb-z-dropdown: 100;
  --nb-z-sticky: 500;
  --nb-z-modal: 1000;
  --nb-z-tooltip: 1500;
}

/* ============================================
   DARK MODE COLORS
   ============================================ */

[data-theme='dark'] {
  /* Backgrounds */
  --nb-bg-light: #1A1A1A;
  --nb-bg-white: #2A2A2A;
  --nb-bg-dark: #000000;
  --nb-bg-alt: #333333;

  /* Borders */
  --nb-border-gray: #666666;
  --nb-border-dark: #FFFFFF;
  --nb-border-light: #444444;

  /* Text */
  --nb-text-primary: #FFFFFF;
  --nb-text-secondary: #CCCCCC;
  --nb-text-tertiary: #999999;
  --nb-text-white: #FFFFFF;

  /* Shadows in dark mode */
  --nb-shadow-xs: 1px 1px 0 #FFFFFF;
  --nb-shadow-sm: 2px 2px 0 #FFFFFF;
  --nb-shadow-md: 4px 4px 0 #FFFFFF;
  --nb-shadow-lg: 6px 6px 0 #FFFFFF;
  --nb-shadow-xl: 8px 8px 0 #FFFFFF;
  --nb-shadow-2xl: 12px 12px 0 #FFFFFF;
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--nb-font-primary);
  font-size: var(--nb-text-base);
  line-height: var(--nb-leading-normal);
  color: var(--nb-text-primary);
  background: var(--nb-bg-light);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Border Utilities */
.nb-border {
  border: var(--nb-border-normal) solid var(--nb-border-dark);
}

.nb-border-thin {
  border: var(--nb-border-thin) solid var(--nb-border-dark);
}

.nb-border-thick {
  border: var(--nb-border-thick) solid var(--nb-border-dark);
}

.nb-border-gray {
  border: var(--nb-border-normal) solid var(--nb-border-gray);
}

.nb-border-top {
  border-top: var(--nb-border-normal) solid var(--nb-border-dark);
}

.nb-border-bottom {
  border-bottom: var(--nb-border-normal) solid var(--nb-border-dark);
}

.nb-border-left {
  border-left: var(--nb-border-normal) solid var(--nb-border-dark);
}

.nb-border-right {
  border-right: var(--nb-border-normal) solid var(--nb-border-dark);
}

/* Shadow Utilities */
.nb-shadow-sm {
  box-shadow: var(--nb-shadow-sm);
}

.nb-shadow-md {
  box-shadow: var(--nb-shadow-md);
}

.nb-shadow-lg {
  box-shadow: var(--nb-shadow-lg);
}

.nb-shadow-xl {
  box-shadow: var(--nb-shadow-xl);
}

.nb-shadow-2xl {
  box-shadow: var(--nb-shadow-2xl);
}

.nb-shadow-green {
  box-shadow: var(--nb-shadow-green);
}

.nb-shadow-red {
  box-shadow: var(--nb-shadow-red);
}

.nb-shadow-blue {
  box-shadow: var(--nb-shadow-blue);
}

/* No Border Radius - Enforce sharp corners */
.nb-sharp,
.nb-no-radius {
  border-radius: 0 !important;
}

/* Background Utilities */
.nb-bg-white {
  background: var(--nb-bg-white);
}

.nb-bg-light {
  background: var(--nb-bg-light);
}

.nb-bg-dark {
  background: var(--nb-bg-dark);
}

.nb-bg-alt {
  background: var(--nb-bg-alt);
}

/* Text Color Utilities */
.nb-text-primary {
  color: var(--nb-text-primary);
}

.nb-text-secondary {
  color: var(--nb-text-secondary);
}

.nb-text-white {
  color: var(--nb-text-white);
}

/* Font Weight Utilities */
.nb-font-normal {
  font-weight: var(--nb-font-normal);
}

.nb-font-medium {
  font-weight: var(--nb-font-medium);
}

.nb-font-semibold {
  font-weight: var(--nb-font-semibold);
}

.nb-font-bold {
  font-weight: var(--nb-font-bold);
}

/* Text Size Utilities */
.nb-text-xs {
  font-size: var(--nb-text-xs);
}

.nb-text-sm {
  font-size: var(--nb-text-sm);
}

.nb-text-base {
  font-size: var(--nb-text-base);
}

.nb-text-lg {
  font-size: var(--nb-text-lg);
}

.nb-text-xl {
  font-size: var(--nb-text-xl);
}

.nb-text-2xl {
  font-size: var(--nb-text-2xl);
}

.nb-text-3xl {
  font-size: var(--nb-text-3xl);
}

/* Spacing Utilities */
.nb-p-2 {
  padding: var(--nb-space-2);
}

.nb-p-4 {
  padding: var(--nb-space-4);
}

.nb-p-6 {
  padding: var(--nb-space-6);
}

.nb-p-8 {
  padding: var(--nb-space-8);
}

.nb-m-2 {
  margin: var(--nb-space-2);
}

.nb-m-4 {
  margin: var(--nb-space-4);
}

.nb-m-6 {
  margin: var(--nb-space-6);
}

.nb-m-8 {
  margin: var(--nb-space-8);
}

.nb-mb-2 {
  margin-bottom: var(--nb-space-2);
}

.nb-mb-4 {
  margin-bottom: var(--nb-space-4);
}

.nb-mb-6 {
  margin-bottom: var(--nb-space-6);
}

.nb-mb-8 {
  margin-bottom: var(--nb-space-8);
}

.nb-mt-2 {
  margin-top: var(--nb-space-2);
}

.nb-mt-4 {
  margin-top: var(--nb-space-4);
}

.nb-mt-6 {
  margin-top: var(--nb-space-6);
}

.nb-mt-8 {
  margin-top: var(--nb-space-8);
}

/* Display Utilities */
.nb-flex {
  display: flex;
}

.nb-inline-flex {
  display: inline-flex;
}

.nb-grid {
  display: grid;
}

.nb-block {
  display: block;
}

.nb-inline-block {
  display: inline-block;
}

/* Flex Utilities */
.nb-flex-col {
  flex-direction: column;
}

.nb-flex-row {
  flex-direction: row;
}

.nb-items-center {
  align-items: center;
}

.nb-justify-center {
  justify-content: center;
}

.nb-justify-between {
  justify-content: space-between;
}

.nb-gap-2 {
  gap: var(--nb-space-2);
}

.nb-gap-4 {
  gap: var(--nb-space-4);
}

.nb-gap-6 {
  gap: var(--nb-space-6);
}

/* Text Utilities */
.nb-uppercase {
  text-transform: uppercase;
}

.nb-text-center {
  text-align: center;
}

.nb-text-left {
  text-align: left;
}

.nb-text-right {
  text-align: right;
}

/* Cursor Utilities */
.nb-cursor-pointer {
  cursor: pointer;
}

/* Transition Utilities */
.nb-transition {
  transition: all var(--nb-transition-normal);
}

.nb-transition-fast {
  transition: all var(--nb-transition-fast);
}