/* =====================================================
   CSS VARIABLES (Custom Properties)
===================================================== */
:root {
  /* Colors */
  --color-bg: #F2F1EE;
  --color-text-primary: #333;
  --color-text-secondary: #555;
  --color-text-light: #666;
  --color-text-lighter: #888;

  --color-primary: #333; /* Main brand color (e.g., buttons, active states) */
  --color-primary-hover: #4a4a4a;

  --color-border: #e9e9e9;
  --color-border-light: #f0f0f0;
  --color-border-dark: #ccc;

  --color-card-bg: #ffffff;
  --color-input-bg: #fcfcfc;
  --color-light-bg: #f8f8f8; /* For subtle backgrounds (e.g., user info, descriptions) */

  --color-error: #d32f2f;
  --color-success: #2e7d32;
  --color-favorite: #ff4d4d;
  --color-share: #4a90e2;

  /* Spacing & Sizing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --header-height-mobile: 64px;
  --header-height-desktop: 80px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, .1);
  --shadow-lg: 0 5px 15px rgba(0, 0, 0, .15);

  /* Transitions */
  --transition-fast: .15s ease;
  --transition-medium: .2s ease;
}

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

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100svh;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

body {
  overscroll-behavior: none;
  overflow-y: hidden; /* Default for homepage/app shell */
  touch-action: manipulation; /* Prevent double-tap zoom on interactive elements */
}

/* Base link styles */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-medium);
}
a:hover {
  color: var(--color-primary-hover);
}

/* Base list styles */
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4 {
  color: var(--color-text-primary);
}

/* Section titles and dividers */
.section_title {
  text-align: center;
  font-size: 28px;
  margin-bottom: var(--spacing-lg);
  font-weight: 600;
}

.section_divider {
  border: 0;
  height: 1px;
  background: var(--color-border-dark);
  max-width: 400px;
  margin: var(--spacing-xl) auto;
}

/* Utility classes */
.error {
  color: var(--color-error);
  font-weight: 500;
}