/* ------------------------------------------------------
   theme.css — Design System: Variables & Base Typography
   ------------------------------------------------------
   Loaded globally BEFORE site.css and components.css.
   Defines the canonical design tokens (colors, spacing,
   radius, shadows, typography) that all other stylesheets
   should reference via var(--token-name).

   site.css may override or extend these; that is by design.
*/

:root {
  /* ---- Colors - Neutral Palette ---- */
  /* Primary color: muted blue-gray for professionalism */
  --color-primary:       #5b7c99;
  --color-primary-hover: #4a6480;
  --color-secondary:     #71717a;
  --color-secondary-hover:#52525b;
  /* Danger: softer red */
  --color-danger:        #b91c1c;
  --color-danger-hover:  #991b1b;
  /* Success: muted green */
  --color-success:       #059669;
  --color-warning:       #d97706;
  --color-info:          #0891b2;

  /* Enhanced Neutrals - better contrast and readability */
  --color-white:         #ffffff;
  --color-gray-50:       #f9fafb;
  --color-gray-100:      #f3f4f6;
  --color-gray-200:      #e5e7eb;
  --color-gray-300:      #d1d5db;
  --color-gray-400:      #9ca3af;
  --color-gray-500:      #6b7280;
  --color-gray-600:      #4b5563;
  --color-gray-700:      #374151;
  --color-gray-800:      #1f2937;
  --color-gray-900:      #111827;
  --color-black:         #000000;

  /* ---- Typography - Enhanced for Readability ---- */
  /* Use Inter for better readability, with fallbacks */
  --font-sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

  /* Adjusted font sizes for better hierarchy */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px - body text */
  --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 */

  /* Improved line heights for readability */
  --leading-none:   1;
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.6;    /* Increased for better readability */
  --leading-relaxed: 1.75;
  --leading-loose:  2;

  --font-light:     300;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* ---- Enhanced Spacing - Better Visual Rhythm ---- */
  --space-0:   0;          /* 0px  */
  --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-9:   2.25rem;    /* 36px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-14:  3.5rem;     /* 56px */
  --space-16:  4rem;       /* 64px */

  /* ---- Borders & Radius - Softer corners ---- */
  --radius-none: 0;
  --radius-sm:   0.25rem;  /* 4px  */
  --radius-md:   0.375rem; /* 6px  */
  --radius-lg:   0.5rem;   /* 8px  */
  --radius-xl:   0.75rem;  /* 12px */
  --radius-2xl:  1rem;     /* 16px */
  --radius-full: 9999px;

  --border-width: 1px;
  --border-color: var(--color-gray-200);

  /* ---- Refined 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);

  /* ---- 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);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 1.5rem;
}

/* ---- Base Typography Defaults ---- */
/* Import Inter font for better readability */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-normal);
  color: var(--color-gray-900);
  background-color: var(--color-gray-50); /* Softer background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Enhanced heading hierarchy with better spacing */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--font-semibold);
  margin-top: 0;
  margin-bottom: var(--space-2);
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-6);
}

h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
}

h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

h4 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

h5 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

h6 {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}

/* Enhanced paragraph spacing */
p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

/* Improved code styling */
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em; /* Relative to parent */
  line-height: var(--leading-normal);
}

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

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

pre code {
  background-color: transparent;
  padding: 0;
}

/* Better link styling */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* List improvements */
ul, ol {
  margin-top: 0;
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
  line-height: var(--leading-relaxed);
}

li {
  margin-bottom: var(--space-1);
}

/* Better focus states for accessibility */
:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Selection color */
::selection {
  background-color: var(--color-primary);
  color: var(--color-white);
  background-color: rgba(91, 124, 153, 0.2);
  color: var(--color-gray-900);
}