/*
 * Wanted Design System — Colors & Typography
 * Source: Wanted Design System (Community) Figma file
 * Fonts: Pretendard JP (primary), Wanted Sans (brand), SF Mono (code)
 *
 * Usage: */

/* ─── FONTS ─────────────────────────────────────────────────────── */
/* Note: Wanted Sans is proprietary. Plus Jakarta Sans is used as a substitute below. */

:root {

  /* ─── FONT FAMILIES ─────────────────────────────────────────────── */
  --font-primary:   'Pretendard JP', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --font-brand:     'Plus Jakarta Sans', 'Wanted Sans', sans-serif; /* Wanted Sans substitute */
  --font-mono:      'SF Mono', 'Fira Code', monospace;

  /* ─── ATOMIC COLORS: COMMON ─────────────────────────────────────── */
  --color-common-100: #FFFFFF;
  --color-common-0:   #000000;

  /* ─── ATOMIC COLORS: NEUTRAL ────────────────────────────────────── */
  --color-neutral-99: #FAFAFA;
  --color-neutral-95: #F2F2F3;
  --color-neutral-90: #E8E8EA;
  --color-neutral-80: #D4D4D7;
  --color-neutral-70: #BBBBBE;
  --color-neutral-60: #A0A0A5;
  --color-neutral-50: #85858B;
  --color-neutral-40: #6A6A71;
  --color-neutral-30: #505058;
  --color-neutral-22: #383840;
  --color-neutral-20: #313139;
  --color-neutral-15: #1B1C1E;
  --color-neutral-10: #111114;
  --color-neutral-5:  #080809;
  --color-neutral-0:  #000000;

  /* ─── ATOMIC COLORS: COOL NEUTRAL ───────────────────────────────── */
  --color-cn-99: #F9FAFA;
  --color-cn-98: #F5F6F7;
  --color-cn-97: #F2F3F4;
  --color-cn-96: #EFF0F1;
  --color-cn-95: #ECEDEE;
  --color-cn-90: #E0E1E3;
  --color-cn-80: #C6C8CB;
  --color-cn-70: #ADB0B4;
  --color-cn-60: #9496A1;
  --color-cn-50: #7B7D8A;
  --color-cn-40: #626472;
  --color-cn-30: #4A4C59;
  --color-cn-25: #3E4050;
  --color-cn-23: #383A49;
  --color-cn-22: #353742;
  --color-cn-20: #2E3040;
  --color-cn-17: #272939;
  --color-cn-15: #222432;
  --color-cn-10: #171925;
  --color-cn-7:  #111320;
  --color-cn-5:  #0D0F1A;
  --color-cn-0:  #000000;

  /* ─── ATOMIC COLORS: BLUE (PRIMARY) ─────────────────────────────── */
  --color-blue-99: #EAF2FE;
  --color-blue-95: #CCE0FD;
  --color-blue-90: #99C2FB;
  --color-blue-80: #66A3F9;
  --color-blue-70: #3385F7;
  --color-blue-65: #1A76F6;
  --color-blue-60: #0066FF;  /* Primary brand blue */
  --color-blue-55: #005EE8;
  --color-blue-50: #0055D1;
  --color-blue-45: #004DBA;
  --color-blue-40: #0044A3;
  --color-blue-30: #00337A;
  --color-blue-20: #002252;
  --color-blue-10: #001129;
  --color-blue-0:  #000000;

  /* ─── ATOMIC COLORS: RED (ERROR/DANGER) ──────────────────────────── */
  --color-red-99: #FFF0F0;
  --color-red-95: #FFD1D1;
  --color-red-90: #FFA3A3;
  --color-red-80: #FF7575;
  --color-red-70: #FF5757;
  --color-red-60: #FF4242;  /* Error red */
  --color-red-50: #E53B3B;
  --color-red-40: #CC3535;
  --color-red-30: #992828;
  --color-red-20: #661B1B;
  --color-red-10: #330D0D;
  --color-red-0:  #000000;

  /* ─── ATOMIC COLORS: GREEN (SUCCESS) ────────────────────────────── */
  --color-green-99: #EDFFF4;
  --color-green-95: #C5FFE0;
  --color-green-90: #8BFFC1;
  --color-green-80: #52FFA1;
  --color-green-70: #18FF82;
  --color-green-60: #00BF40;  /* Success green */
  --color-green-50: #00A336;
  --color-green-40: #00872D;
  --color-green-30: #006A23;
  --color-green-20: #004E1A;
  --color-green-10: #003311;
  --color-green-0:  #000000;

  /* ─── ATOMIC COLORS: VIOLET ─────────────────────────────────────── */
  --color-violet-99: #F0ECFE;
  --color-violet-95: #D9D0FD;
  --color-violet-90: #BDB0FB;
  --color-violet-80: #A08FF9;
  --color-violet-70: #8470F7;
  --color-violet-60: #6852F5;
  --color-violet-55: #5B47F4;
  --color-violet-50: #4F3CF3;
  --color-violet-45: #9747FF; /* Accent violet */
  --color-violet-40: #3D30B5;
  --color-violet-30: #2E248A;
  --color-violet-20: #1F185E;
  --color-violet-10: #100D33;
  --color-violet-0:  #000000;

  /* ─── ATOMIC COLORS: CYAN ───────────────────────────────────────── */
  --color-cyan-50: #0098B2;
  --color-cyan-40: #007A91;

  /* ─── ATOMIC COLORS: LIGHT BLUE ──────────────────────────────────── */
  --color-lightblue-60: #3385FF;
  --color-lightblue-50: #005EDB;

  /* ─── SEMANTIC: FOREGROUND ───────────────────────────────────────── */
  --color-fg-normal:      #1B1C1E;         /* primary text */
  --color-fg-neutral:     #37383C;         /* secondary text */
  --color-fg-subtle:      rgba(55,56,60,0.61); /* tertiary/caption */
  --color-fg-disabled:    rgba(55,56,60,0.38);
  --color-fg-oncolor:     #FFFFFF;         /* text on colored backgrounds */
  --color-fg-link:        #0066FF;
  --color-fg-error:       #FF4242;
  --color-fg-success:     #00BF40;

  /* ─── SEMANTIC: BACKGROUND ───────────────────────────────────────── */
  --color-bg-base:        #FFFFFF;
  --color-bg-layer:       #F7F7F8;         /* card/secondary surfaces */
  --color-bg-overlay:     rgba(0,0,0,0.4);
  --color-bg-primary:     #0066FF;
  --color-bg-error:       #FFF0F0;
  --color-bg-success:     #EDFFF4;
  --color-bg-info:        #EAF2FE;

  /* ─── SEMANTIC: BORDER ───────────────────────────────────────────── */
  --color-border-normal:  rgba(112,115,124,0.22);
  --color-border-strong:  rgba(55,56,60,0.5);
  --color-border-focus:   #0066FF;
  --color-border-error:   #FF4242;
  --color-border-divider: #000000;         /* section dividers */

  /* ─── SEMANTIC: INTERACTIVE ──────────────────────────────────────── */
  --color-action-primary:         #0066FF;
  --color-action-primary-hover:   #005EE8;
  --color-action-primary-pressed: #0055D1;
  --color-action-primary-disabled: rgba(0,102,255,0.4);
  --color-action-secondary:       #F7F7F8;
  --color-action-assistive:       rgba(112,115,124,0.12);

  /* ─── SHADOWS ────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 4px rgba(23,23,23,0.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-3: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-modal: 0 8px 32px rgba(0,0,0,0.12);

  /* ─── BORDER RADIUS ──────────────────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;   /* buttons */
  --radius-lg:    16px;   /* chips, tags */
  --radius-xl:    24px;   /* cards */
  --radius-2xl:   32px;   /* large cards/panels */
  --radius-3xl:   64px;   /* page frames */
  --radius-full:  9999px; /* pills */

  /* ─── SPACING SCALE ──────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* ─── TYPOGRAPHY SCALE ───────────────────────────────────────────── */
  /* Display */
  --text-display-size:     56px;
  --text-display-weight:   700;
  --text-display-lh:       1.25;
  --text-display-ls:       -0.017em;

  /* H1 */
  --text-h1-size:          36px;
  --text-h1-weight:        700;
  --text-h1-lh:            1.334;
  --text-h1-ls:            -0.027em;

  /* H2 */
  --text-h2-size:          28px;
  --text-h2-weight:        700;
  --text-h2-lh:            1.358;
  --text-h2-ls:            -0.024em;

  /* H3 */
  --text-h3-size:          24px;
  --text-h3-weight:        700;
  --text-h3-lh:            1.334;
  --text-h3-ls:            -0.023em;

  /* H4 */
  --text-h4-size:          20px;
  --text-h4-weight:        700;
  --text-h4-lh:            1.4;
  --text-h4-ls:            -0.015em;

  /* Body Large */
  --text-body-lg-size:     17px;
  --text-body-lg-weight:   500;
  --text-body-lg-lh:       1.412;
  --text-body-lg-ls:       0em;

  /* Body (default) */
  --text-body-size:        16px;
  --text-body-weight:      500;
  --text-body-lh:          1.5;
  --text-body-ls:          0.006em;

  /* Body Small */
  --text-body-sm-size:     14px;
  --text-body-sm-weight:   500;
  --text-body-sm-lh:       1.429;
  --text-body-sm-ls:       0.015em;

  /* Caption */
  --text-caption-size:     13px;
  --text-caption-weight:   500;
  --text-caption-lh:       1.385;
  --text-caption-ls:       0.019em;

  /* Label / Tag */
  --text-label-size:       11px;
  --text-label-weight:     700;
  --text-label-lh:         1.273;
  --text-label-ls:         0.031em;
}

/* ─── SEMANTIC ELEMENT STYLES ─────────────────────────────────────── */
body {
  font-family: var(--font-primary);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  color: var(--color-fg-normal);
  background: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-primary);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  color: var(--color-fg-normal);
}
h2, .h2 {
  font-family: var(--font-primary);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  color: var(--color-fg-normal);
}
h3, .h3 {
  font-family: var(--font-primary);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  color: var(--color-fg-normal);
}
h4, .h4 {
  font-family: var(--font-primary);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-fg-normal);
}
p, .body { font-size: var(--text-body-size); font-weight: var(--text-body-weight); line-height: var(--text-body-lh); letter-spacing: var(--text-body-ls); }
.body-lg { font-size: var(--text-body-lg-size); font-weight: var(--text-body-lg-weight); line-height: var(--text-body-lg-lh); }
.body-sm { font-size: var(--text-body-sm-size); font-weight: var(--text-body-sm-weight); line-height: var(--text-body-sm-lh); letter-spacing: var(--text-body-sm-ls); }
.caption  { font-size: var(--text-caption-size); font-weight: var(--text-caption-weight); line-height: var(--text-caption-lh); letter-spacing: var(--text-caption-ls); color: var(--color-fg-subtle); }
.label    { font-size: var(--text-label-size); font-weight: var(--text-label-weight); line-height: var(--text-label-lh); letter-spacing: var(--text-label-ls); text-transform: uppercase; }
code, pre { font-family: var(--font-mono); font-size: 14px; }

a { color: var(--color-fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }