/* ==========================================================================
   Lottielab Design Tokens
   Source: /DESIGN.md
   Scope: variables only. No selectors. Do not edit without updating DESIGN.md.
   ========================================================================== */

:root {
  /* Colors */
  --color-stormy-indigo: #2f2b4a;
  --color-midnight-charcoal: #1c1a2c;
  --color-electric-violet: #7270ff;
  --color-deep-sea-blue: #1560fb;
  --color-soft-gray: #4b5563;
  --color-bright-white: #ffffff;
  --color-ash-gray: #e5e7eb;
  --color-light-mist: #f3f4f6;
  --color-stone-gray: #9ca3af;
  --color-pale-silver: #d9dbda;
  --color-snow-drift: #f9fafb;
  --color-midnight-black: #000000;
  --color-sky-blue: #3585ff;

  /* Decorative gradients */
  --gradient-sunny: linear-gradient(to right, rgb(250, 204, 21), rgb(249, 115, 22));
  --gradient-sunset: linear-gradient(to right, rgb(236, 72, 153), rgb(248, 113, 113));

  /* Typography — Font Families
     Plus Jakarta Sans is Latin-only; fall back to Pretendard for Korean. */
  --font-plus-jakarta-sans: 'Plus Jakarta Sans', 'Pretendard Variable', Pretendard,
                            -apple-system, BlinkMacSystemFont, system-ui,
                            'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic',
                            Roboto, sans-serif;
  --font-google-sans-code: 'Google Sans Code', ui-monospace, SFMono-Regular,
                           Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.78;
  --tracking-caption: 0.3px;

  --text-body-sm: 14px;
  --leading-body-sm: 1.71;
  --tracking-body-sm: 0.35px;

  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: 0.4px;

  --text-subheading: 18px;
  --leading-subheading: 1.56;
  --tracking-subheading: 0.45px;

  --text-heading: 36px;
  --leading-heading: 1.33;
  --tracking-heading: -0.9px;

  --text-heading-lg: 48px;
  --leading-heading-lg: 1.11;
  --tracking-heading-lg: -1.2px;

  --text-display: 60px;
  --leading-display: 1;
  --tracking-display: -1.5px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-192: 192px;
  --spacing-224: 224px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 0px;
  --element-gap: 24px;

  /* Border Radius */
  --radius-input: 4px;
  --radius-card: 8px;
  --radius-button: 12px;
  --radius-tag: 9999px;

  /* Surfaces */
  --surface-canvas: #ffffff;       /* Bright White Canvas (level 0) */
  --surface-section: #f3f4f6;      /* Light Mist Section (level 1) */
  --surface-card: #f9fafb;         /* Snow Drift Card (level 2) */
}