/* ============================================
   Thinky UI Design Tokens
   Extracted from Figma: Thinky_UI
   ============================================ */

:root {
  /* ── Color Palette ── */
  --color-key-orange:     #FF7A00;
  --color-key-orange-hover: #ea580c;
  --color-text-black:     #212529;
  --color-text-gray:      #868E96;
  --color-text-white:     #FFFFFF;
  --color-bg-white:       #FFFFFF;
  --color-bg-warm:        #FFF7ED;
  --color-bg-input:       #F9FAFB;
  --color-bg-gray:        #F3F4F6;
  --color-bg-disabled:    #D1D5DC;
  --color-bg-disabled-alt: rgba(229, 231, 235, 0.6);
  --color-bg-orange-light: rgba(255, 122, 0, 0.2);
  --color-border:         #E5E7EB;
  --color-icon-default:   #99A1AF;
  --color-icon-dark:      #4A5565;
  --color-dim:            rgba(0, 0, 0, 0.5);

  /* Gradient: Background */
  --gradient-bg: radial-gradient(circle at 50% 96%, rgba(255, 208, 176, 1) 0%, rgba(255, 238, 224, 1) 43%, rgba(255, 251, 249, 1) 67%, rgba(250, 249, 248, 1) 100%);

  /* Card accent */
  --color-card-accent:    #FFDBBB;
  --color-card-accent-2:  #79ACFE;

  /* ── Typography ── */

  /* Title */
  --font-title-family:    'Pretendard', sans-serif;
  --font-title-weight:    700;
  --font-title-size:      18px;
  --font-title-line:      1;

  /* Contents (Body) */
  --font-contents-family: 'Pretendard', sans-serif;
  --font-contents-weight: 400;
  --font-contents-size:   14px;
  --font-contents-line:   1;

  /* Contents Bold */
  --font-contents-bold-weight: 600;

  /* Sub (Caption) */
  --font-sub-family:      'Pretendard', sans-serif;
  --font-sub-weight:      400;
  --font-sub-size:        12px;
  --font-sub-line:        1;

  /* Floating label */
  --font-floating-weight: 600;
  --font-floating-size:   12px;
  --font-floating-line:   1;

  /* PC scale variants */
  --font-pc-title-size:   13px;
  --font-pc-title-line:   1;
  --font-pc-contents-size: 11px;
  --font-pc-contents-line: 1;
  --font-pc-sub-size:     9px;
  --font-pc-sub-line:     1;

  /* ── Spacing ── */
  --space-4:   4px;
  --space-8:   8px;
  --space-10:  10px;
  --space-16:  16px;
  --space-20:  20px;
  --space-28:  28px;
  --space-32:  32px;
  --space-48:  48px;

  /* Component padding */
  --padding-btn:          7px 16px;
  --padding-input:        8px 16px;
  --padding-tooltip:      10px;
  --padding-middle:       20px 20px 0;
  --padding-bottom:       16.67px 16px 0 16px;

  /* Gap */
  --gap-btn:              3px;
  --gap-section:          8px;
  --gap-form:             8px;

  /* ── Border Radius ── */
  --radius-btn:           26px;
  --radius-tooltip-bot:   0px 20px 20px 20px;
  --radius-tooltip-user:  20px 0px 20px 20px;
  --radius-card:          20px;
  --radius-avatar:        48px;
  --radius-input:         26px;
  --radius-popup:         16px;
  --radius-pc-container:  20px;
  --radius-full:          9999px;

  /* ── Shadows ── */
  --shadow-card:          0px 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-floating:      0px 3px 9px rgba(222, 226, 230, 1);
  --shadow-popup:         0px 4px 20px rgba(231, 67, 13, 0.5);
  --shadow-popup-alt:     0px 3.2px 16px rgba(231, 67, 13, 0.5);

  /* ── Stroke ── */
  --stroke-border:        1px solid #E5E7EB;
  --stroke-orange:        1px solid #ffa652;
  --stroke-icon:          2px;
  --stroke-icon-color:    #99A1AF;

  /* ── Component Sizes ── */
  --size-btn-height:      48px;
  --size-icon:            48px;
  --size-avatar-sm:       28px;
  --size-avatar-md:       40px;
  --size-avatar-lg:       48px;
  --size-floating-btn:    72px;
  --size-input-height:    48px;

  /* Mobile frame */
  --mobile-width:         375px;
  --mobile-height:        812px;

  /* PC chat window */
  --pc-chat-width:        300px;
  --pc-chat-height:       500px;
}