/* ==========================================================================
   SAJANGCHECK V2 DESIGN SYSTEM TOKENS
   - File: assets/css/design-tokens-v2.css
   - Scope: Independent Design System Token Specification
   - Usage: Applied to /design-system/ preview and future V2 components
   ========================================================================== */

:root {
  /* --------------------------------------------------
     1. COLOR SYSTEM
     - Balance: White / Neutral ~90%, Green Accent ~10%
     -------------------------------------------------- */
  --color-brand: #168A61;
  --color-brand-hover: #10714F;
  --color-brand-soft: #EAF6F1;
  
  --color-text: #18231F;
  --color-text-body: #475467;
  --color-text-secondary: #667085;
  
  --color-border: #E4E7EC;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F7F9F8;
  --color-white: #FFFFFF;

  /* --------------------------------------------------
     2. TYPOGRAPHY SYSTEM
     - Font: Pretendard
     -------------------------------------------------- */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --font-size-h1-desktop: 52px;
  --line-height-h1-desktop: 1.18;
  --font-size-h1-mobile: 36px;
  --line-height-h1-mobile: 1.25;

  --font-size-h2-desktop: 36px;
  --line-height-h2-desktop: 1.25;
  --font-size-h2-mobile: 28px;
  --line-height-h2-mobile: 1.3;

  --font-size-h3: 22px;
  --line-height-h3: 1.35;

  --font-size-body-lg: 18px;
  --line-height-body-lg: 1.7;

  --font-size-body: 16px;
  --line-height-body: 1.7;

  --font-size-caption: 14px;
  --line-height-caption: 1.5;

  /* --------------------------------------------------
     3. LAYOUT SYSTEM
     -------------------------------------------------- */
  --container-max: 1200px;
  --container-text: 860px;
  
  --padding-h-desktop: 32px;
  --padding-h-tablet: 24px;
  --padding-h-mobile: 20px;

  --spacing-section-desktop: 112px;
  --spacing-section-tablet: 88px;
  --spacing-section-mobile: 72px;

  /* --------------------------------------------------
     4. SPACING SCALE
     -------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;

  /* --------------------------------------------------
     5. BORDER RADIUS
     -------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;  /* Buttons, Inputs */
  --radius-lg: 16px;  /* Cards */
  --radius-full: 9999px;

  /* --------------------------------------------------
     6. COMPONENT SIZES
     -------------------------------------------------- */
  --btn-height-primary: 54px;
  --btn-height-md: 46px;
  --btn-height-sm: 38px;
  --input-height: 50px;
}