/* =====================================================================
   INNERBETTER Design Tokens
   ---------------------------------------------------------------------
   1) Primitive tokens  : 브랜드 팔레트 원시값 (직접 사용 금지, 시맨틱 토큰만 사용)
   2) Semantic tokens   : 역할 기반 색상 (bg / text / brand / border / status)
   3) Layout tokens     : spacing / radius / shadow / z-index
   4) Typography tokens : font family / size / weight / line-height
   5) Motion tokens     : duration / easing
   ===================================================================== */

:root {
  /* ---------- 1. Primitive: Color Palette (브랜드 컬러칩) ---------- */
  --off-white:   #FAFAFA;   /* Off White */
  --beige-100:   #F2F1ED;   /* Light Beige */
  --beige-200:   #E9E7E2;   /* Mid Beige */
  --beige-300:   #E0DED7;   /* Dark Beige */
  --brand-black: #151515;   /* Black */
  --lime-100:    #F1FBD0;   /* Lime (tint) */
  --green-400:   #C8FF00;   /* Green (primary accent) */
  --green-500:   #C2F700;   /* Dark Green (hover/pressed) */
  /* 파생 톤 (컬러칩 보간) */
  --lime-50:     #F8FDE6;
  --green-600:   #A8D600;
  --gray-400:    #9B9A94;
  --gray-600:    #6B6A65;
  --gray-800:    #2A2A2A;
  --white:       #FFFFFF;
  --red-500:     #E5484D;
  --red-50:      #FFECEC;
  --success-500: #16A34A;
  --success-50:  #E6F8EC;
  --amber-500:   #D97706;
  --amber-50:    #FFF4E0;

  /* ---------- 2. Semantic: Background ---------- */
  --color-bg:            var(--white);
  --color-bg-page:       var(--off-white);
  --color-bg-subtle:     var(--beige-100);
  --color-bg-muted:      var(--beige-200);
  --color-bg-inverse:    var(--brand-black);
  --color-bg-inverse-2:  var(--gray-800);
  --color-bg-brand:      var(--green-400);
  --color-bg-brand-soft: var(--lime-100);
  --color-bg-brand-faint:var(--lime-50);
  --color-bg-overlay:    rgba(21, 21, 21, .55);

  /* ---------- 2. Semantic: Text ---------- */
  --color-text:          var(--brand-black);
  --color-text-muted:    var(--gray-600);
  --color-text-subtle:   var(--gray-400);
  --color-text-inverse:  var(--white);
  --color-text-on-brand: var(--brand-black);
  --color-text-brand:    var(--green-400);

  /* ---------- 2. Semantic: Brand / Action ---------- */
  --color-brand:         var(--green-400);
  --color-brand-hover:   var(--green-500);
  --color-brand-light:   var(--lime-100);
  --color-primary:       var(--brand-black);
  --color-primary-hover: #000000;

  /* ---------- 2. Semantic: Border ---------- */
  --color-border:        var(--beige-200);
  --color-border-strong: var(--beige-300);
  --color-border-focus:  var(--brand-black);
  --color-border-brand:  var(--green-400);

  /* ---------- 2. Semantic: Status ---------- */
  --color-danger:        var(--red-500);
  --color-danger-soft:   var(--red-50);
  --color-success:       var(--success-500);
  --color-success-soft:  var(--success-50);
  --color-warning:       var(--amber-500);
  --color-warning-soft:  var(--amber-50);

  /* ---------- 3. Layout: Spacing (4pt scale) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- 3. Layout: Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-full: 999px;

  /* ---------- 3. Layout: Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(21, 21, 21, .06), 0 1px 3px rgba(21, 21, 21, .04);
  --shadow-md: 0 8px 24px rgba(21, 21, 21, .10);
  --shadow-lg: 0 24px 64px rgba(21, 21, 21, .18);
  --shadow-brand: 0 12px 32px rgba(200, 255, 0, .45);

  /* ---------- 3. Layout: Z-index ---------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 9999;

  /* ---------- 4. Typography ---------- */
  --font-sans: Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
               "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;

  /* ---------- 5. Motion ---------- */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(.2, .0, .0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---------- 6. Component tokens ---------- */
  --btn-radius: var(--radius-md);
  --btn-height-sm: 34px;
  --btn-height-md: 42px;
  --btn-height-lg: 52px;
  --input-radius: var(--radius-sm);
  --input-height: 42px;
  --card-radius: var(--radius-lg);
  --switch-w: 44px;
  --switch-h: 26px;

  /* ---------- 7. Kiosk-only tokens (1080×1920 기준) ---------- */
  --kiosk-w: 1080px;
  --kiosk-h: 1920px;
  --kiosk-pad: 56px;
  --kiosk-text-sm: 24px;
  --kiosk-text-md: 30px;
  --kiosk-text-lg: 38px;
  --kiosk-text-xl: 52px;
  --kiosk-text-2xl: 68px;
  --kiosk-btn-h: 132px;
  --kiosk-radius: 36px;
}