/**
 * PaldoFlower Design Tokens
 * Based on docs/DESIGN-PALDO.md (Airbnb layout + floral palette + Pretendard)
 */

:root {
  /* Brand */
  --color-primary: #E85D75;
  --color-primary-active: #C94A63;
  --color-primary-disabled: #F5C4CE;
  --color-primary-soft: #FFF5F7;
  --color-secondary: #3D6B59;
  --color-secondary-active: #2D5244;
  --color-accent-gold: #C9A227;

  /* Neutrals */
  --color-ink: #222222;
  --color-body: #3F3F3F;
  --color-muted: #6A6A6A;
  --color-muted-soft: #929292;
  --color-hairline: #DDDDDD;
  --color-hairline-soft: #EBEBEB;
  --color-border-strong: #C1C1C1;
  --color-canvas: #FFFFFF;
  --color-surface-soft: #F7F7F7;
  --color-surface-strong: #F2F2F2;
  --color-surface-order: #F0F7F4;
  --color-surface-recv: #FFF8F5;
  --color-on-primary: #FFFFFF;
  --color-link: #3D6B59;
  --color-error: #C13515;
  --color-success: #2D6A4F;
  --color-scrim: rgba(0, 0, 0, 0.5);

  /* Typography */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --text-display-xl: 700 28px/1.4 var(--font-sans);
  --text-display-lg: 600 22px/1.25 var(--font-sans);
  --text-title-md: 600 16px/1.25 var(--font-sans);
  --text-body-md: 400 16px/1.5 var(--font-sans);
  --text-body-sm: 400 14px/1.43 var(--font-sans);
  --text-button-md: 500 16px/1.25 var(--font-sans);
  --text-nav: 600 16px/1.25 var(--font-sans);

  /* Radius (Airbnb soft corners) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 64px;

  /* Layout */
  --container-max: 1280px;
  --sidebar-width: 240px;
  --header-height: 72px;

  /* Elevation (single tier, Airbnb-style) */
  --shadow-card: rgba(0, 0, 0, 0.02) 0 0 0 1px,
    rgba(0, 0, 0, 0.04) 0 2px 6px,
    rgba(0, 0, 0, 0.1) 0 4px 8px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: var(--text-body-md);
  color: var(--color-body);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--color-surface-soft);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}