/* Base Reset & Variables */
/* 1) Reset / Normalize (lightweight) */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

html, body { height: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif; line-height: 1.6; color: var(--text-color); background-color: #fff; }

h1,h2,h3,h4,h5,h6 { margin: 0 0 10px; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 10px; }

ul,ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
button { font: inherit; }
input,button,select,textarea { font-family: inherit; font-size: 100%; }

/* 2) Design tokens / variables */
:root {
  /* Colors */
  --primary-color: #009DB5; /* brand teal */
  --primary-dark: #007A8C;
  --secondary-color: #60C0F3; /* accent blue */
  --white: #FFFFFF;
  --text-color: #333333;
  --text-light: #666666;

  /* Effects */
  --shadow: 0 2px 8px rgba(0,0,0,0.08);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Breakpoints */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* 3) Containers */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 4) Utility classes (minimal) */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }