/* ============================================
   HORYS DESIGN SYSTEM — CSS VARIABLES
   Version: 1.0.0
   ============================================ */

:root {
  --color-bone: #F0EBE0;
  --color-paper: #FAF6EC;
  --color-cream-deep: #E8E1D2;
  --color-teal-deep: #2C5F5D;
  --color-teal: #4A8884;
  --color-teal-shadow: #3A7370;
  --color-teal-dark: #1F4543;
  --color-ink: #1F2D3D;
  --color-muted: #6B7A75;
  --color-line: rgba(44, 95, 93, 0.15);

  --font-display-thai: 'IBM Plex Sans Thai Looped', serif;
  --font-display-latin: 'Fraunces', serif;
  --font-body: 'IBM Plex Sans Thai', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-h1: clamp(40px, 6vw, 88px);
  --fs-h2: clamp(32px, 5vw, 56px);
  --fs-h3: clamp(24px, 3vw, 32px);
  --fs-body: 17px;
  --fs-label: 11px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px;

  --shadow-subtle: 0 2px 4px rgba(31, 45, 61, 0.08);
  --shadow-card: 0 4px 12px rgba(31, 45, 61, 0.10);
  --shadow-logo: 0 2px 4px rgba(31, 45, 61, 0.12);
}

body {
  background: var(--color-bone);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.7;
  margin: 0;
}

.h1 { font-family: var(--font-display-thai); font-size: var(--fs-h1); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-display-thai); font-size: var(--fs-h2); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.h3 { font-family: var(--font-display-thai); font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; }

.italic-accent {
  font-family: var(--font-display-latin);
  font-style: italic;
  color: var(--color-teal-deep);
  font-weight: 400;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}

.btn {
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--color-teal-deep);
  color: var(--color-bone);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink);
}

.card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}