/* ===== DESIGN SYSTEM ===== */ 
/* Core variables and design tokens - No breakpoints needed */

/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
*/
:root {
  /* ===== TYPOGRAPHY ===== */
  --font-mono: 'Noto-Sans-Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
  --font-sans: 'Noto-Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  
  /* Font sizes - fluid scaling */
  --text-xs: clamp(0.75rem, 0.9vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.1vw, 1rem);
  --text-md: clamp(0.945rem, 1.16vw, 1.100rem);
  --text-base: clamp(1rem, 1.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 2vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 2.5vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 3vw, 3rem);
  
  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2.25;
  
  /* ===== SPACING ===== */
  /* Base unit: 1rem = 16px */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  
  /* Semantic spacing */
  --space-ss: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: var(--space-6);
  --space-lg: var(--space-8);
  --space-xl: var(--space-12);
  --space-2xl: var(--space-16);
  --space-3xl: var(--space-24);
  --space-4xl: var(--space-32);
  
  /* ===== COLORS ===== */
  /* Grayscale palette */
  --gray-0: #ffffff;    /* Pure white */
  --gray-1: #f5f5f5;    /* Lightest gray */
  --gray-2: #e5e5e5;    /* Light gray */
  --gray-3: #d4d4d4;    /* Medium-light gray */
  --gray-4: #a3a3a3;    /* Medium gray */
  --gray-5: #737373;    /* Medium-dark gray */
  --gray-6: #525252;    /* Dark gray */
  --gray-7: #404040;    /* Darker gray */
  --gray-8: #262626;    /* Very dark gray */
  --gray-9: #171717;    /* Nearly black */
  --gray-10: #000000;   /* Pure black */

  /* ====== COLOR ACCENT ====== */

  --accent1: #85f050;    /* Lime */
  --warm-grey:  #c8c7ba;    /* warm grey NSS! */
  

    /* Opaque Variants */
  --gray-0-90: rgba(255, 255, 255, 0.9);
  --gray-0-75: rgba(255, 255, 255, 0.75);
  --gray-0-50: rgba(255, 255, 255, 0.5);
  --gray-9-50: rgba(10, 10, 10, 0.5);    /* Nearly black */
  
  /* ===== LAYOUT ===== */
  /* Container max-widths */
  --container-xs: 20rem;     /* 320px */
  --container-sm: 24rem;     /* 384px */
  --container-md: 28rem;     /* 448px */
  --container-lg: 32rem;     /* 512px */
  --container-xl: 36rem;     /* 576px */
  --container-2xl: 42rem;    /* 672px */
  --container-3xl: 48rem;    /* 768px */
  --container-4xl: 56rem;    /* 896px */
  --container-5xl: 64rem;    /* 1024px */
  --container-6xl: 72rem;    /* 1152px */
  --container-7xl: 80rem;    /* 1280px */
  
  /* Ultra-small (240px-319px) - emergency fallbacks */
  /* Small (320px-767px) - phones */
  /* Medium (768px-1023px) - tablets, small laptops */
  /* Large (1024px+) - laptops, desktops, large tablets */

  /* Breakpoints (for reference in media queries) */
  --bp-sm: 20rem;      /* 320px */
  --bp-md: 48rem;      /* 768px */
  --bp-lg: 64rem;      /* 1024px */
  --bp-xl: 80rem;      /* 1280px */

  /* ===== Z-INDEX LAYERS ===== */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  --z-loading: 90;
  --z-max: 100;
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== BORDERS ===== */
  --border-width-0: 0px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;

  /* ===== TOGGLE BORDER ==== */
  --border-color: var(--gray-10);
  
  /* ===== GRID ===== */
  --grid-cols-1: repeat(1, minmax(0, 1fr));
  --grid-cols-2: repeat(2, minmax(0, 1fr));
  --grid-cols-3: repeat(3, minmax(0, 1fr));
  --grid-cols-4: repeat(4, minmax(0, 1fr));
  --grid-cols-6: repeat(6, minmax(0, 1fr));
  --grid-cols-12: repeat(12, minmax(0, 1fr));
  
  /* Auto-fit grids */
  --grid-auto-fit-xs: repeat(auto-fit, minmax(16rem, 1fr));
  --grid-auto-fit-sm: repeat(auto-fit, minmax(20rem, 1fr));
  --grid-auto-fit-md: repeat(auto-fit, minmax(24rem, 1fr));
  --grid-auto-fit-lg: repeat(auto-fit, minmax(28rem, 1fr));
}

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

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Container query setup */
.container-query {
  container-type: inline-size;
}


/* Typography utilities */
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

/* Theme-level vars (--accent-color, --bg-primary, --border-color) 
   are defined in theme-*.css files — not here */