/* ============================= */
/* DESIGN SYSTEM - GLOBAL */
/* ============================= */

:root {

  /* COLORS */
  --color-primary: #122046;
  --color-primary-dark: #0e1a3a;
  --color-accent: #2fb1c2;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-bg: #ffffff;
  --color-surface: #f8fafc;

  /* TYPOGRAPHY */
  --font-main: "Noto Sans", Arial, sans-serif;

  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 36px;

  /* SPACING */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 80px;

  /* LAYOUT */
  --container-width: 1200px;

  /* UI */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-full: 999px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
}

/* ============================= */
/* RESET */
/* ============================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  padding-top: 45px;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.section {
  padding: var(--space-5) 0;
}