/*
 * Wanted Design System — CSS Custom Properties
 * Source: Wanted Design System (Community).fig
 * Primary typeface: Pretendard JP (Korean/English/Japanese)
 * Secondary: Wanted Sans (brand/display)
 * Mono: SF Mono
 */

/* ─────────────────────────────────────────────
   FONT IMPORTS
   Pretendard JP is not on Google Fonts; we use
   Pretendard (Latin + Korean) from CDN as closest
   available substitute. Flag: production should
   use the licensed Pretendard JP font files.
───────────────────────────────────────────── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ─────────────────────────────────────────────
   ATOMIC COLOR TOKENS
───────────────────────────────────────────── */
:root {
  /* Common */
  --color-common-100: #FFFFFF;
  --color-common-0:   #000000;

  /* Neutral (warm-gray) */
  --color-neutral-99: #F7F7F7;
  --color-neutral-95: #DCDCDC;
  --color-neutral-90: #C4C4C4;
  --color-neutral-80: #B0B0B0;
  --color-neutral-70: #9B9B9B;
  --color-neutral-60: #8A8A8A;
  --color-neutral-50: #737373;
  --color-neutral-40: #5C5C5C;
  --color-neutral-30: #474747;
  --color-neutral-22: #303030;
  --color-neutral-20: #2A2A2A;
  --color-neutral-15: #1C1C1C;
  --color-neutral-10: #171717;
  --color-neutral-5:  #0F0F0F;
  --color-neutral-0:  #000000;

  /* Cool Neutral (bluish-gray — primary UI neutral) */
  --color-cn-99: #F7F7F8;
  --color-cn-98: #F4F4F5;
  --color-cn-97: #EAEBEC;
  --color-cn-96: #E1E2E4;
  --color-cn-95: #DBDCDF;
  --color-cn-90: #C2C4C8;
  --color-cn-80: #AEB0B6;
  --color-cn-70: #989BA2;
  --color-cn-60: #878A93;
  --color-cn-50: #70737C;
  --color-cn-40: #5A5C63;
  --color-cn-30: #46474C;
  --color-cn-25: #37383C;
  --color-cn-23: #333438;
  --color-cn-22: #2E2F33;
  --color-cn-20: #292A2D;
  --color-cn-17: #212225;
  --color-cn-15: #1B1C1E;
  --color-cn-10: #171719;
  --color-cn-7:  #141415;
  --color-cn-5:  #0F0F10;
  --color-cn-0:  #000000;

  /* Blue (primary brand) */
  --color-blue-99: #F7FBFF;
  --color-blue-95: #EAF2FE;
  --color-blue-90: #C9DEFE;
  --color-blue-80: #9EC5FF;
  --color-blue-70: #69A5FF;
  --color-blue-65: #4F95FF;
  --color-blue-60: #3385FF;
  --color-blue-55: #1A75FF;
  --color-blue-50: #0066FF;
  --color-blue-45: #005EEB;
  --color-blue-40: #0054D1;
  --color-blue-30: #003E9C;
  --color-blue-20: #002966;
  --color-blue-10: #001536;

  /* Red (error / danger) */
  --color-red-99: #FFFAFA;
  --color-red-95: #FEECEC;
  --color-red-90: #FED5D5;
  --color-red-80: #FFB5B5;
  --color-red-70: #FF8C8C;
  --color-red-60: #FF6363;
  --color-red-50: #FF4242;
  --color-red-40: #E52222;
  --color-red-30: #B20C0C;
  --color-red-20: #750404;
  --color-red-10: #3B0101;

  /* Green (success / positive) */
  --color-green-99: #F2FFF6;
  --color-green-95: #D9FFE6;
  --color-green-90: #ACFCC7;
  --color-green-80: #7DF5A5;
  --color-green-70: #49E57D;
  --color-green-60: #1ED45A;
  --color-green-50: #00BF40;
  --color-green-40: #009632;
  --color-green-30: #006E25;
  --color-green-20: #004517;
  --color-green-10: #00240C;

  /* Orange (warning) */
  --color-orange-99: #FFFCF7;
  --color-orange-95: #FEF4E6;
  --color-orange-90: #FEE6C6;
  --color-orange-80: #FFD49C;
  --color-orange-70: #FFC06E;
  --color-orange-60: #FFA938;
  --color-orange-50: #FF9200;
  --color-orange-40: #D47800;
  --color-orange-30: #9C5800;
  --color-orange-20: #663A00;
  --color-orange-10: #361E00;

  /* Red-Orange */
  --color-redorange-50: #FF5E00;

  /* Cyan */
  --color-cyan-99: #F7FEFF;
  --color-cyan-95: #DEFAFF;
  --color-cyan-90: #B5F4FF;
  --color-cyan-80: #8AEDFF;
  --color-cyan-70: #57DFF7;
  --color-cyan-60: #28D0ED;
  --color-cyan-50: #00BDDE;
  --color-cyan-40: #0098B2;
  --color-cyan-30: #006F82;
  --color-cyan-20: #004854;
  --color-cyan-10: #00252B;

  /* Light Blue */
  --color-lightblue-50: #00AEFF;

  /* Violet */
  --color-violet-50: #6541F2;

  /* Purple */
  --color-purple-50: #CB59FF;

  /* Magenta */
  --color-magenta-50: #F553DA;

  /* ─────────────────────────────────────────────
     SEMANTIC COLOR TOKENS (Light Mode)
  ───────────────────────────────────────────── */
  /* Foreground / Text */
  --color-fg-primary:    #17171A;   /* CN-10  — primary text */
  --color-fg-secondary:  rgba(55,56,60,0.61);  /* secondary text */
  --color-fg-tertiary:   rgba(46,47,51,0.88);  /* descriptive text */
  --color-fg-disabled:   rgba(112,115,124,0.43);
  --color-fg-on-primary: #FFFFFF;   /* text on primary blue */
  --color-fg-link:       #0066FF;   /* links */
  --color-fg-error:      #FF4242;
  --color-fg-success:    #00BF40;
  --color-fg-warning:    #FF9200;

  /* Background */
  --color-bg-base:       #FFFFFF;
  --color-bg-surface:    #F7F7F8;   /* cards, panels */
  --color-bg-overlay:    rgba(0,0,0,0.08);
  --color-bg-primary:    #0066FF;   /* CTA background */
  --color-bg-error:      #FEECEC;
  --color-bg-success:    #D9FFE6;
  --color-bg-warning:    #FEF4E6;

  /* Border / Divider */
  --color-border-base:   rgba(112,115,124,0.22);
  --color-border-strong: rgba(112,115,124,0.43);
  --color-border-focus:  #0066FF;

  /* ─────────────────────────────────────────────
     OPACITY SCALE
  ───────────────────────────────────────────── */
  --opacity-5:  0.05;
  --opacity-8:  0.08;
  --opacity-12: 0.12;
  --opacity-16: 0.16;
  --opacity-22: 0.22;
  --opacity-28: 0.28;
  --opacity-35: 0.35;
  --opacity-43: 0.43;
  --opacity-52: 0.52;
  --opacity-61: 0.61;
  --opacity-74: 0.74;
  --opacity-88: 0.88;
  --opacity-97: 0.97;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — FONT FAMILIES
  ───────────────────────────────────────────── */
  --font-primary:   'Pretendard', 'Pretendard JP', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-brand:     'Wanted Sans', 'Pretendard', sans-serif;
  --font-mono:      'SF Mono', 'Fira Mono', 'Consolas', monospace;

  /* ─────────────────────────────────────────────
     TYPOGRAPHY — TYPE SCALE
     Format: size / line-height / letter-spacing
  ───────────────────────────────────────────── */

  /* Display */
  --text-display1-size:    56px;
  --text-display1-lh:      1.25;
  --text-display1-ls:      -0.017em;
  --text-display1-weight:  700;

  --text-display2-size:    40px;
  --text-display2-lh:      1.3;
  --text-display2-ls:      -0.0282em;
  --text-display2-weight:  700;

  --text-display3-size:    36px;
  --text-display3-lh:      1.334;
  --text-display3-ls:      -0.027em;
  --text-display3-weight:  700;

  /* Title */
  --text-title1-size:   32px;
  --text-title1-lh:     1.375;
  --text-title1-ls:     -0.0253em;
  --text-title1-weight: 700;

  --text-title2-size:   28px;
  --text-title2-lh:     1.358;
  --text-title2-ls:     -0.0236em;
  --text-title2-weight: 700;

  --text-title3-size:   24px;
  --text-title3-lh:     1.334;
  --text-title3-ls:     -0.023em;
  --text-title3-weight: 700;

  /* Heading */
  --text-heading1-size:   22px;
  --text-heading1-lh:     1.364;
  --text-heading1-ls:     -0.0194em;
  --text-heading1-weight: 700;

  --text-heading2-size:   20px;
  --text-heading2-lh:     1.4;
  --text-heading2-ls:     -0.012em;
  --text-heading2-weight: 700;

  /* Headline */
  --text-headline1-size:   18px;
  --text-headline1-lh:     1.445;
  --text-headline1-ls:     -0.002em;
  --text-headline1-weight: 600;

  --text-headline2-size:   17px;
  --text-headline2-lh:     1.412;
  --text-headline2-ls:     0em;
  --text-headline2-weight: 600;

  /* Body */
  --text-body1-size:    16px;
  --text-body1-lh:      1.5;
  --text-body1-lh-read: 1.625;
  --text-body1-ls:      0.0057em;
  --text-body1-weight:  500;

  --text-body2-size:    15px;
  --text-body2-lh:      1.467;
  --text-body2-lh-read: 1.6;
  --text-body2-ls:      0.0096em;
  --text-body2-weight:  500;

  /* Label */
  --text-label1-size:    14px;
  --text-label1-lh:      1.429;
  --text-label1-lh-read: 1.571;
  --text-label1-ls:      0.0145em;
  --text-label1-weight:  500;

  --text-label2-size:   13px;
  --text-label2-lh:     1.385;
  --text-label2-ls:     0.0194em;
  --text-label2-weight: 500;

  /* Caption */
  --text-caption1-size:   12px;
  --text-caption1-lh:     1.334;
  --text-caption1-ls:     0.0252em;
  --text-caption1-weight: 500;

  --text-caption2-size:   11px;
  --text-caption2-lh:     1.273;
  --text-caption2-ls:     0.0311em;
  --text-caption2-weight: 500;

  /* ─────────────────────────────────────────────
     SPACING TOKENS (4px base grid)
  ───────────────────────────────────────────── */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-8:   16px;
  --space-10:  20px;
  --space-12:  24px;
  --space-14:  28px;
  --space-16:  32px;
  --space-20:  40px;
  --space-24:  48px;
  --space-28:  56px;
  --space-32:  64px;
  --space-40:  80px;
  --space-48:  96px;
  --space-64: 128px;

  /* ─────────────────────────────────────────────
     BORDER RADIUS TOKENS
  ───────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─────────────────────────────────────────────
     SHADOW TOKENS
  ───────────────────────────────────────────── */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-3: 0 8px 24px rgba(23,23,23,0.10);
  --shadow-4: 0 16px 40px rgba(23,23,23,0.12);
}

/* ─────────────────────────────────────────────
   SEMANTIC TEXT CLASSES
───────────────────────────────────────────── */
.text-display1 { font-size: var(--text-display1-size); line-height: var(--text-display1-lh); letter-spacing: var(--text-display1-ls); font-weight: var(--text-display1-weight); }
.text-display2 { font-size: var(--text-display2-size); line-height: var(--text-display2-lh); letter-spacing: var(--text-display2-ls); font-weight: var(--text-display2-weight); }
.text-display3 { font-size: var(--text-display3-size); line-height: var(--text-display3-lh); letter-spacing: var(--text-display3-ls); font-weight: var(--text-display3-weight); }
.text-title1   { font-size: var(--text-title1-size);   line-height: var(--text-title1-lh);   letter-spacing: var(--text-title1-ls);   font-weight: var(--text-title1-weight);   }
.text-title2   { font-size: var(--text-title2-size);   line-height: var(--text-title2-lh);   letter-spacing: var(--text-title2-ls);   font-weight: var(--text-title2-weight);   }
.text-title3   { font-size: var(--text-title3-size);   line-height: var(--text-title3-lh);   letter-spacing: var(--text-title3-ls);   font-weight: var(--text-title3-weight);   }
.text-heading1 { font-size: var(--text-heading1-size); line-height: var(--text-heading1-lh); letter-spacing: var(--text-heading1-ls); font-weight: var(--text-heading1-weight); }
.text-heading2 { font-size: var(--text-heading2-size); line-height: var(--text-heading2-lh); letter-spacing: var(--text-heading2-ls); font-weight: var(--text-heading2-weight); }
.text-headline1{ font-size: var(--text-headline1-size);line-height: var(--text-headline1-lh);letter-spacing: var(--text-headline1-ls);font-weight: var(--text-headline1-weight);}
.text-headline2{ font-size: var(--text-headline2-size);line-height: var(--text-headline2-lh);letter-spacing: var(--text-headline2-ls);font-weight: var(--text-headline2-weight);}
.text-body1    { font-size: var(--text-body1-size);    line-height: var(--text-body1-lh);    letter-spacing: var(--text-body1-ls);    font-weight: var(--text-body1-weight);    }
.text-body2    { font-size: var(--text-body2-size);    line-height: var(--text-body2-lh);    letter-spacing: var(--text-body2-ls);    font-weight: var(--text-body2-weight);    }
.text-label1   { font-size: var(--text-label1-size);   line-height: var(--text-label1-lh);   letter-spacing: var(--text-label1-ls);   font-weight: var(--text-label1-weight);   }
.text-label2   { font-size: var(--text-label2-size);   line-height: var(--text-label2-lh);   letter-spacing: var(--text-label2-ls);   font-weight: var(--text-label2-weight);   }
.text-caption1 { font-size: var(--text-caption1-size); line-height: var(--text-caption1-lh); letter-spacing: var(--text-caption1-ls); font-weight: var(--text-caption1-weight); }
.text-caption2 { font-size: var(--text-caption2-size); line-height: var(--text-caption2-lh); letter-spacing: var(--text-caption2-ls); font-weight: var(--text-caption2-weight); }