/* ============================================================
   Grebob Design System — tokens.css
   Source: Figma Variables (Foundation 136 + Semantic 41)
   Generated: 2026-04-15
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────
     FOUNDATION — Color Palette
     ────────────────────────────────────────────── */

  /* Basic */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-black-opacity-020: rgba(0, 0, 0, 0.10);
  --color-black-opacity-025: rgba(0, 0, 0, 0.16);
  --color-black-opacity-030: rgba(0, 0, 0, 0.20);
  --color-black-opacity-040: rgba(0, 0, 0, 0.25);

  /* Grey */
  --color-grey-010: #F8F9FB;
  --color-grey-020: #F0F2F4;
  --color-grey-025: #DFE2E5;
  --color-grey-030: #C1C7CD;
  --color-grey-040: #A2A9B0;
  --color-grey-050: #878D96;
  --color-grey-060: #697077;
  --color-grey-070: #4D5358;
  --color-grey-080: #343A3F;
  --color-grey-090: #21272A;
  --color-grey-100: #121619;

  /* Blue (Maven Blue) */
  --color-blue-010: #F0FAFF;
  --color-blue-015: #DEF4FF;
  --color-blue-020: #B2E5FF;
  --color-blue-030: #88D6F4;
  --color-blue-040: #44B8E2;
  --color-blue-050: #259AC5;
  --color-blue-060: #0B86B2;
  --color-blue-070: #00759F;
  --color-blue-080: #035D7E;
  --color-blue-090: #004B67;
  --color-blue-100: #00394E;

  /* Dark Navy */
  --color-darknavy-005: #EFF6FF;
  --color-darknavy-010: #E7F1FF;
  --color-darknavy-020: #B9E1FF;
  --color-darknavy-030: #61B8FB;
  --color-darknavy-040: #0D7BDC;
  --color-darknavy-050: #004AA7;
  --color-darknavy-060: #003E8B;
  --color-darknavy-070: #003270;
  --color-darknavy-080: #002554;

  /* Green */
  --color-green-010: #E8FDEE;
  --color-green-015: #DEFBE6;
  --color-green-020: #A7F0BA;
  --color-green-030: #6FDC8C;
  --color-green-040: #42BE65;
  --color-green-050: #24A148;
  --color-green-060: #198038;
  --color-green-070: #0E6027;
  --color-green-080: #044317;
  --color-green-090: #022D0D;

  /* Red */
  --color-red-010: #FFF1F1;
  --color-red-015: #FFE3E3;
  --color-red-020: #FFD7D9;
  --color-red-030: #FFB3B8;
  --color-red-040: #FF8389;
  --color-red-050: #FA4D56;
  --color-red-060: #DA1E28;
  --color-red-070: #A2191F;
  --color-red-080: #750E13;
  --color-red-090: #520408;

  /* Orange */
  --color-orange-010: #FFF2E8;
  --color-orange-015: #FFE9D9;
  --color-orange-020: #FFD9BE;
  --color-orange-030: #FFB784;
  --color-orange-040: #FF8630;
  --color-orange-050: #FB7211;
  --color-orange-060: #DB5C00;
  --color-orange-070: #8A3800;
  --color-orange-080: #5E2900;
  --color-orange-090: #3E1A00;

  /* Yellow */
  --color-yellow-010: #FFFBDA;
  --color-yellow-015: #FFF8C1;
  --color-yellow-020: #FFF3B3;
  --color-yellow-030: #FFEC86;
  --color-yellow-040: #FFCD19;
  --color-yellow-050: #FDBA00;
  --color-yellow-060: #DDA200;
  --color-yellow-070: #B47E1D;
  --color-yellow-080: #82541F;
  --color-yellow-090: #643D24;

  /* Purple */
  --color-purple-010: #F6F2FF;
  --color-purple-015: #EDE4FF;
  --color-purple-020: #E8DAFF;
  --color-purple-030: #D4BBFF;
  --color-purple-040: #BE95FF;
  --color-purple-050: #A56EFF;
  --color-purple-060: #8A3FFC;
  --color-purple-070: #6929C4;
  --color-purple-080: #491D8B;
  --color-purple-090: #31135E;

  /* ──────────────────────────────────────────────
     SEMANTIC — Core Colors
     ────────────────────────────────────────────── */

  /* Primary (Brand) */
  --maven-blue-bright: #2EABD8;
  --maven-blue-dark: #259AC5;

  /* Positive (Success) — 3-tier */
  --positive-bg: #E8FDEE;          /* = green010 */
  --positive-secondary: #42BE65;   /* = green040 */
  --positive-primary: #24A148;     /* = green050 */

  /* Negative (Error) — 3-tier */
  --negative-bg: #FFF1F1;          /* = red010 */
  --negative-secondary: #FF8389;   /* = red040 */
  --negative-primary: #FA4D56;     /* = red050 */

  /* Warning — 3-tier */
  --warning-bg: #FFF2E8;           /* = orange010 */
  --warning-secondary: #FF8630;    /* = orange040 */
  --warning-primary: #FB7211;      /* = orange050 */

  /* ──────────────────────────────────────────────
     SEMANTIC — Background Stack (bg010→050)
     ────────────────────────────────────────────── */
  --bg-010: #F8F9FB;   /* = grey010. Content Area 기본 배경 */
  --bg-020: #F4F6F9;   /* 필터 영역, 사이드 패널 */
  --bg-030: #EDF2F7;   /* 테이블 헤더, 구분 영역 */
  --bg-040: #E5EBF2;   /* 강조 구분 */
  --bg-050: #D3DCE7;   /* 최대 깊이 */

  /* ──────────────────────────────────────────────
     SEMANTIC — Text Colors
     ────────────────────────────────────────────── */
  --text-primary: #21272A;     /* = grey090. 본문 기본 */
  --text-secondary: #878D96;   /* = grey050. 보조/플레이스홀더 */
  --text-disabled: #C1C7CD;    /* = grey030 */
  --text-on-color: #FFFFFF;    /* = white. 컬러 배경 위 텍스트 */
  --text-link: #0D7BDC;        /* = darknavy040 */
  --text-error: #FA4D56;       /* = negative-primary */

  /* ──────────────────────────────────────────────
     SEMANTIC — Border
     ────────────────────────────────────────────── */
  --border-default: #DFE2E5;   /* = grey025 */
  --border-strong: #A2A9B0;    /* = grey040 */
  --border-focus: #259AC5;     /* = maven-blue-dark */
  --border-error: #FA4D56;     /* = negative-primary */
  --border-disabled: #F0F2F4;  /* = grey020 */

  /* ──────────────────────────────────────────────
     SEMANTIC — Surface
     ────────────────────────────────────────────── */
  --surface-default: #FFFFFF;
  --surface-subtle: #F8F9FB;   /* = bg-010 */
  --surface-overlay: rgba(13, 24, 32, 0.70); /* = dimmed030 */

  /* ──────────────────────────────────────────────
     SEMANTIC — Dimmed Overlays
     ────────────────────────────────────────────── */
  --dimmed-010: rgba(13, 24, 32, 0.20);  /* 가벼운 오버레이 */
  --dimmed-020: rgba(13, 24, 32, 0.50);  /* 기본 오버레이 */
  --dimmed-030: rgba(13, 24, 32, 0.70);  /* 모달 배경 */

  /* ──────────────────────────────────────────────
     SEMANTIC — Chart Colors
     ────────────────────────────────────────────── */
  --chart-none: #CAD9E7;
  --chart-progress-010: #8DD8FF;
  --chart-progress-020: #51BEFF;
  --chart-progress-030: #0094FF;
  --chart-progress-040: #0068C8;
  --chart-progress-050: #1F3F5E;
  --chart-high: #FB7211;
  --chart-highest: #FF1066;

  /* ──────────────────────────────────────────────
     FOUNDATION — Typography
     ────────────────────────────────────────────── */

  /* Font Family */
  --font-visual: 'Nunito', sans-serif;
  --font-content-en: 'Roboto', sans-serif;
  --font-content-kr: 'Noto Sans KR', sans-serif;
  --font-content: 'Roboto', 'Noto Sans KR', sans-serif;

  /* Font Weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Size */
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-52: 52px;
  --font-size-64: 64px;

  /* ──────────────────────────────────────────────
     FOUNDATION — Spacing
     ────────────────────────────────────────────── */
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* ──────────────────────────────────────────────
     FOUNDATION — Border Radius
     ────────────────────────────────────────────── */
  --radius-6: 6px;
  --radius-8: 8px;     /* 보충: 필터 영역, 입력 필드 */
  --radius-12: 12px;   /* 보충: 카드, 패널 */
  --radius-round: 9999px;

  /* ──────────────────────────────────────────────
     FOUNDATION — Shadow (보충)
     ────────────────────────────────────────────── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.12);
}