/**
 * Kaloria Tools - Enhanced Foundation CSS v2
 * Version: 2.0
 *
 * Inspired by GLapp's consistency patterns
 * Provides: Semantic design tokens, responsive utilities, WCAG compliance
 * Size: ~6KB
 * Cached: Forever (immutable)
 */

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN TOKENS - Semantic Color System */
/* ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══ SEMANTIC COLORS (GLapp-inspired naming) ═══ */

  /* Foreground (Text) Colors */
  --color-foreground: #111827;           /* Primary text - gray-900 */
  --color-foreground-muted: #6B7280;     /* Secondary text - gray-500 */
  --color-foreground-lighter: #9CA3AF;   /* Tertiary text - gray-400 */

  /* Background Colors */
  --color-background: #FFFFFF;           /* Page background */
  --color-background-alt: #F9FAFB;       /* Alternate sections - gray-50 */
  --color-background-elevated: #FFFFFF;  /* Cards, modals */

  /* Brand Colors */
  --color-primary: #10B981;              /* Kaloria Emerald - emerald-500 */
  --color-primary-hover: #059669;        /* Hover state - emerald-600 */
  --color-primary-light: #34D399;        /* Light variant - emerald-400 */
  --color-primary-lighter: #6EE7B7;      /* Lighter variant - emerald-300 */

  /* Opacity Helpers (for consistent alpha values) */
  --primary-5: rgba(16, 185, 129, 0.05);
  --primary-10: rgba(16, 185, 129, 0.1);
  --primary-20: rgba(16, 185, 129, 0.2);
  --primary-30: rgba(16, 185, 129, 0.3);
  --primary-90: rgba(16, 185, 129, 0.9);

  /* Border Colors */
  --color-border: #E5E7EB;               /* Default borders - gray-200 */
  --color-border-hover: var(--primary-20); /* Hover state */
  --color-border-focus: var(--color-primary); /* Focus state */

  /* Semantic Status Colors */
  --color-success: #22C55E;              /* Success messages - green-500 */
  --color-warning: #F59E0B;              /* Warning messages - amber-500 */
  --color-error: #EF4444;                /* Error messages - red-500 */
  --color-info: #3B82F6;                 /* Info messages - blue-500 */

  /* ═══ RESPONSIVE TYPOGRAPHY SCALE ═══ */

  /* Font Sizes (rem-based for accessibility) */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */

  /* Responsive Heading Sizes (adjust via media queries) */
  --h1-size: var(--text-3xl);
  --h2-size: var(--text-2xl);
  --h3-size: var(--text-xl);
  --h4-size: var(--text-lg);

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

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* ═══ SPACING SCALE (4px-based like Tailwind) ═══ */

  --space-0: 0;
  --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-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */

  /* ═══ BORDER RADIUS (consistent rounding) ═══ */

  --radius-none: 0;
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Pill shape */

  /* ═══ SHADOWS (consistent depth) ═══ */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px var(--primary-20);
  --shadow-glow-lg: 0 0 40px var(--primary-30);

  /* ═══ TRANSITIONS ═══ */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══ BREAKPOINTS (for reference in media queries) ═══ */

  --breakpoint-xs: 475px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ═══ Z-INDEX SCALE ═══ */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;

  /* ═══ FONT FAMILIES ═══ */

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji',
               'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code',
               'Fira Mono', 'Roboto Mono', monospace;
}

/* Dark Mode Support (respects prefers-color-scheme) - DISABLED */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-foreground: #F9FAFB;
    --color-foreground-muted: #D1D5DB;
    --color-foreground-lighter: #9CA3AF;
    --color-background: #111827;
    --color-background-alt: #1F2937;
    --color-background-elevated: #1F2937;
    --color-border: #374151;
  }
}
*/

/* ═══════════════════════════════════════════════════════════════ */
/* CSS RESET - Modern, Minimal */
/* ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Improve text rendering */
body {
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE TYPOGRAPHY */
/* ═══════════════════════════════════════════════════════════════ */

/* Responsive Heading Sizes */
h1, .text-h1 {
  font-size: var(--h1-size);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  color: var(--color-foreground);
}

h2, .text-h2 {
  font-size: var(--h2-size);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  color: var(--color-foreground);
}

h3, .text-h3 {
  font-size: var(--h3-size);
  line-height: var(--leading-snug);
  font-weight: var(--font-semibold);
  color: var(--color-foreground);
}

h4, .text-h4 {
  font-size: var(--h4-size);
  line-height: var(--leading-snug);
  font-weight: var(--font-semibold);
  color: var(--color-foreground);
}

/* Progressive Enhancement: Scale up on larger screens */
@media (width >= 640px) {
  :root {
    --h1-size: var(--text-4xl);
    --h2-size: var(--text-3xl);
    --h3-size: var(--text-2xl);
  }
}

@media (width >= 1024px) {
  :root {
    --h1-size: var(--text-5xl);
    --h2-size: var(--text-4xl);
    --h3-size: var(--text-3xl);
  }
}

/* Paragraph Styles */
p {
  margin-bottom: 1em;
  line-height: var(--leading-relaxed);
}

/* Link Styles */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
}

/* Strong and Emphasis */
strong, b {
  font-weight: var(--font-bold);
}

em, i {
  font-style: italic;
}

/* Code */
code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--color-background-alt);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
}

pre {
  background: var(--color-background-alt);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════ */
/* UTILITY CLASSES - Color */
/* ═══════════════════════════════════════════════════════════════ */

.text-foreground { color: var(--color-foreground); }
.text-muted { color: var(--color-foreground-muted); }
.text-lighter { color: var(--color-foreground-lighter); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }

.bg-background { background: var(--color-background); }
.bg-elevated { background: var(--color-background-elevated); }
.bg-alt { background: var(--color-background-alt); }
.bg-primary { background: var(--color-primary); }
.bg-primary-5 { background: var(--primary-5); }
.bg-primary-10 { background: var(--primary-10); }

/* ═══════════════════════════════════════════════════════════════ */
/* UTILITY CLASSES - Spacing */
/* ═══════════════════════════════════════════════════════════════ */

/* Responsive Padding Utilities */
.py-8-lg-12 {
  padding-block: var(--space-8);
}

@media (width >= 1024px) {
  .py-8-lg-12 {
    padding-block: var(--space-12);
  }
}

.px-4-lg-8 {
  padding-inline: var(--space-4);
}

@media (width >= 1024px) {
  .px-4-lg-8 {
    padding-inline: var(--space-8);
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* LAYOUT PRIMITIVES */
/* ═══════════════════════════════════════════════════════════════ */

/* Container - Centers content with max-width */
.container {
  max-width: min(1200px, 100% - 2rem);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (width >= 1024px) {
  .container {
    padding-inline: var(--space-8);
  }
}

/* Section - Consistent vertical spacing */
.section {
  padding-block: var(--space-8);
}

@media (width >= 1024px) {
  .section {
    padding-block: var(--space-12);
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ACCESSIBILITY HELPERS */
/* ═══════════════════════════════════════════════════════════════ */

/* 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-width: 0;
}

/* Focus Visible (keyboard navigation) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip to Main Content */
.skip-to-main {
  position: absolute;
  top: -9999px;
  left: 0;
  z-index: var(--z-modal);
  padding: var(--space-4);
  background: var(--color-background-elevated);
  color: var(--color-foreground);
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.skip-to-main:focus {
  top: var(--space-4);
  left: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE HELPERS */
/* ═══════════════════════════════════════════════════════════════ */

/* Show/Hide at Breakpoints */
@media (width < 640px) {
  .hidden-mobile { display: none !important; }
}

@media (width >= 640px) and (width < 1024px) {
  .hidden-tablet { display: none !important; }
}

@media (width >= 1024px) {
  .hidden-desktop { display: none !important; }
}

/* Mobile-first responsive display */
.mobile-only {
  display: block;
}

@media (width >= 640px) {
  .mobile-only {
    display: none;
  }
}

.desktop-only {
  display: none;
}

@media (width >= 1024px) {
  .desktop-only {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* PERFORMANCE OPTIMIZATIONS */
/* ═══════════════════════════════════════════════════════════════ */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Improve rendering performance */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* GPU acceleration for animations */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ICON SYSTEM (Heroicons compatible) */
/* ═══════════════════════════════════════════════════════════════ */

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.icon-xs { width: 1rem; height: 1rem; }
.icon-sm { width: 1.25rem; height: 1.25rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3rem; height: 3rem; }

/* ═══════════════════════════════════════════════════════════════ */
/* PRINT STYLES */
/* ═══════════════════════════════════════════════════════════════ */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* END OF FOUNDATION CSS */
/* Components imported separately via components.css */
/* ═══════════════════════════════════════════════════════════════ */