/*
 * tokens.product.css
 *
 * Upstage Product context tokens.
 * Source: DESIGN_v2.md §2 (Primitive), §3-P (Product Semantic), §3-P Component Tokens.
 * Target: Console, Dashboard, Settings, API management, Web app UI.
 *
 * 본 파일은 starter kit의 lightweight Product token source이다.
 * Product repos should import or merge this file through their global CSS adapter.
 * 6월 Task 2에서 @upstageai/design-tokens로 승격된다.
 *
 * Values are HSL (hue saturation% lightness%) unless noted.
 */

:root {
  /* ========== L1 PRIMITIVES — NEUTRALS ========== */
  --color-neutral-0: 0 0% 100%; /* #FFFFFF */
  --color-neutral-50: 240 25% 98%; /* #F8F9FB */
  --color-neutral-100: 240 16% 96%; /* #F1F3F6 */
  --color-neutral-200: 240 10% 90%; /* #E1E4EA */
  --color-neutral-300: 240 8% 83%; /* #CFD3DC */
  --color-neutral-400: 240 6% 65%; /* #9DA3B8 */
  --color-neutral-500: 240 4% 46%; /* #71758B */
  --color-neutral-600: 240 5% 34%; /* #525770 */
  --color-neutral-700: 240 5% 26%; /* #3F4356 */
  --color-neutral-800: 240 4% 16%; /* #272A39 */
  --color-neutral-900: 240 6% 10%; /* #181929 */
  --color-neutral-950: 240 9% 4%; /* #090B17 */

  /* ========== L1 PRIMITIVES — BRAND (PRIMARY) ========== */
  --color-brand-50: 227 100% 96%; /* #EBF0FF */
  --color-brand-100: 229 100% 93%; /* #DBE2FF */
  --color-brand-200: 231 100% 88%; /* #C2CBFF */
  --color-brand-300: 233 100% 80%; /* #99A5FF */
  --color-brand-400: 239 100% 73%; /* #7578FF — Primary (dark mode) */
  --color-brand-500: 244 100% 66%; /* #5B52FF — Primary (light mode) */
  --color-brand-600: 248 91% 59%; /* #4D33F4 */
  --color-brand-700: 249 69% 51%; /* #3F23DB */
  --color-brand-800: 249 66% 40%; /* #3725AE — Eyebrow dark / accent fg */
  --color-brand-900: 249 62% 27%; /* #322790 — Accent bg (dark) */
  --color-brand-950: 236 50% 13%; /* #161650 */

  /* ========== L1 PRIMITIVES — GREEN-YELLOW (SECONDARY) ========== */
  --color-green-yellow-200: 67 100% 80%; /* #F3FF99 */
  --color-green-yellow-400: 84 100% 65%; /* #B8FF4D — Secondary action */
  --color-green-yellow-900: 101 100% 21%; /* #226B00 */

  /* ========== L1 PRIMITIVES — SEMANTIC (RED/GREEN/BLUE/YELLOW) ========== */
  --color-red-50: 356 100% 97%;
  --color-red-400: 350 100% 61%;
  --color-red-900: 350 86% 29%;
  --color-green-50: 158 85% 96%;
  --color-green-400: 165 100% 34%;
  --color-green-900: 163 88% 20%;
  --color-blue-50: 202 100% 97%;
  --color-blue-400: 212 56% 53%;
  --color-blue-900: 201 100% 27%;
  --color-yellow-50: 46 100% 95%;
  --color-yellow-400: 36 100% 57%;
  --color-yellow-900: 39 100% 27%;

  /* ========== L1 PRIMITIVES — CATEGORICAL (10 SET) ========== */
  --color-coral-50: 28 100% 93%;
  --color-coral-400: 14 100% 70%; /* #FF8A66 */
  --color-coral-800: 358 81% 34%;
  --color-skyblue-50: 193 64% 94%;
  --color-skyblue-500: 200 81% 54%; /* #2BA9E9 */
  --color-skyblue-800: 217 100% 33%;
  --color-olive-50: 81 78% 89%;
  --color-olive-600: 81 82% 33%; /* #699A0F */
  --color-olive-900: 104 100% 16%;
  --color-purple-50: 260 100% 96%;
  --color-purple-400: 259 87% 66%; /* #8D5DF4 — Product purple alt (NOT --ups-purple) */
  --color-purple-700: 257 69% 43%;
  --color-mint-50: 184 100% 95%;
  --color-mint-500: 182 100% 40%; /* #00C5CC */
  --color-mint-800: 190 95% 26%;
  --color-magenta-50: 304 100% 96%;
  --color-magenta-500: 323 84% 60%; /* #EF43AD */
  --color-magenta-700: 329 82% 42%;
  --color-teal-50: 162 63% 94%;
  --color-teal-600: 175 84% 32%; /* #0D968B */
  --color-teal-900: 174 80% 20%;
  --color-burgundy-50: 339 77% 95%;
  --color-burgundy-500: 340 56% 54%; /* #CB4874 */
  --color-burgundy-800: 339 87% 29%;

  /* ========== L1 PRIMITIVES — CHART PALETTE ========== */
  /* Keep aligned with the Product token source in this repo. */
  --color-chart-1: var(--color-brand-500);
  --color-chart-2: var(--color-green-yellow-400);
  --color-chart-3: var(--color-coral-400);
  --color-chart-4: var(--color-mint-500);
  --color-chart-5: var(--color-magenta-500);
  --color-chart-6: var(--color-skyblue-500);
  --color-chart-7: var(--color-teal-600);
  --color-chart-8: var(--color-burgundy-500);
  --color-chart-9: var(--color-olive-600);
  --color-chart-10: var(--color-neutral-500);

  /* ========== SHADOW BASE ========== */
  /* Keep aligned with the Product token source in this repo. */
  --shadow-color: 220 30% 10%;
  --shadow-strength: 0.08;

  /* ========== L2 SEMANTIC — BASE & LAYOUT ========== */
  --background: var(--color-neutral-0);
  --subtle: var(--color-neutral-50);
  --foreground: var(--color-neutral-900);
  --card: var(--color-neutral-0);
  --card-foreground: var(--color-neutral-900);
  --card-border: var(--color-neutral-100);
  --popover: var(--color-neutral-0);
  --popover-foreground: var(--color-neutral-900);
  --popover-border: var(--color-neutral-200);
  --overlay: 215 27.9% 16.9%;
  --overlay-opacity: 0.5;
  --overlay-blur: 4px;
  --modal-bg: var(--color-neutral-0);
  --modal-border: var(--color-neutral-300);
  --modal-shadow: 0 20px 25px -5px hsl(var(--shadow-color) / 0.1);

  /* ========== L2 SEMANTIC — ACTIONS ========== */
  --primary: var(--color-brand-500);
  --primary-foreground: var(--color-neutral-0);
  --secondary: var(--color-green-yellow-400);
  --secondary-foreground: var(--color-neutral-900);
  --destructive: var(--color-red-400);
  --destructive-foreground: var(--color-neutral-0);
  --accent: var(--color-brand-50);
  --accent-foreground: var(--color-brand-800);
  --accent-border: var(--color-brand-300);
  --disabled: var(--color-neutral-100);
  --disabled-foreground: var(--color-neutral-300);
  --disabled-border: var(--color-neutral-100);

  /* ========== L2 SEMANTIC — CATEGORICAL ACCENT ========== */
  /* Prefer these semantic 3-step sets over primitive color scale suffixes. */
  --accent-coral-bg: var(--color-coral-50);
  --accent-coral-default: var(--color-coral-400);
  --accent-coral-fg: var(--color-coral-800);
  --accent-skyblue-bg: var(--color-skyblue-50);
  --accent-skyblue-default: var(--color-skyblue-500);
  --accent-skyblue-fg: var(--color-skyblue-800);
  --accent-olive-bg: var(--color-olive-50);
  --accent-olive-default: var(--color-olive-600);
  --accent-olive-fg: var(--color-olive-900);
  --accent-purple-bg: var(--color-purple-50);
  --accent-purple-default: var(--color-purple-400);
  --accent-purple-fg: var(--color-purple-700);
  --accent-mint-bg: var(--color-mint-50);
  --accent-mint-default: var(--color-mint-500);
  --accent-mint-fg: var(--color-mint-800);
  --accent-magenta-bg: var(--color-magenta-50);
  --accent-magenta-default: var(--color-magenta-500);
  --accent-magenta-fg: var(--color-magenta-700);
  --accent-teal-bg: var(--color-teal-50);
  --accent-teal-default: var(--color-teal-600);
  --accent-teal-fg: var(--color-teal-900);
  --accent-burgundy-bg: var(--color-burgundy-50);
  --accent-burgundy-default: var(--color-burgundy-500);
  --accent-burgundy-fg: var(--color-burgundy-800);
  --accent-green-bg: var(--color-green-50);
  --accent-green-default: var(--color-green-400);
  --accent-green-fg: var(--color-green-900);
  --accent-gray-bg: var(--color-neutral-50);
  --accent-gray-default: var(--color-neutral-400);
  --accent-gray-fg: var(--color-neutral-700);
  --accent-yellow-bg: var(--color-yellow-50);
  --accent-yellow-default: var(--color-yellow-400);
  --accent-yellow-fg: var(--color-yellow-900);

  /* ========== L2 SEMANTIC — MUTED SCALE ========== */
  --muted-light: var(--color-neutral-50);
  --muted: var(--color-neutral-100);
  --muted-soft: var(--color-neutral-200);
  --muted-medium: var(--color-neutral-300);
  --muted-foreground: var(--color-neutral-500);
  --muted-dark: var(--color-neutral-600);
  --muted-darker: var(--color-neutral-800);

  /* ========== L2 SEMANTIC — BORDER SCALE ========== */
  --border-subtle: var(--color-neutral-100);
  --border: var(--color-neutral-200);
  --border-medium: var(--color-neutral-300);
  --border-strong: var(--color-neutral-500);
  --border-dark: var(--color-neutral-600);
  --border-bold: var(--color-neutral-800);

  /* ========== L2 SEMANTIC — FORMS ========== */
  --input: var(--color-neutral-200);
  --input-hover: var(--color-neutral-300);
  --input-active: var(--color-brand-500);
  --ring: var(--color-brand-200);
  --ring-offset: var(--color-neutral-0);
  --placeholder: var(--color-neutral-500);
  --switch-track-off: var(--color-neutral-200);
  --switch-thumb: var(--color-neutral-0);
  --slider-track: var(--color-neutral-200);
  --slider-range: var(--color-brand-500);
  --slider-thumb: var(--color-neutral-0);

  /* ========== L2 SEMANTIC — STATE ========== */
  --state-success-bg: var(--color-green-50);
  --state-success-icon: var(--color-green-400);
  --state-success-fg: var(--color-green-900);
  --state-warning-bg: var(--color-yellow-50);
  --state-warning-icon: var(--color-yellow-400);
  --state-warning-fg: var(--color-yellow-900);
  --state-info-bg: var(--color-blue-50);
  --state-info-icon: var(--color-blue-400);
  --state-info-fg: var(--color-blue-900);
  --state-error-bg: var(--color-red-50);
  --state-error-icon: var(--color-red-400);
  --state-error-fg: var(--color-red-900);

  /* ========== L2 SEMANTIC — FEEDBACK ========== */
  --skeleton: var(--color-neutral-200);
  --skeleton-strong: var(--color-neutral-300);
  --skeleton-shimmer: var(--color-neutral-100);
  --status-online: var(--color-green-400);
  --status-offline: var(--color-neutral-400);
  --status-busy: var(--color-red-400);
  --status-away: var(--color-yellow-400);

  /* ========== L2 SEMANTIC — UTILITY ========== */
  --link: var(--color-brand-500);
  --link-hover: var(--color-brand-800);
  --selection-background: var(--color-brand-100);
  --selection-foreground: var(--color-brand-800);
  --code-background: var(--color-neutral-100);
  --code-foreground: var(--color-neutral-900);
  --kbd-background: var(--color-neutral-100);
  --kbd-foreground: var(--color-neutral-500);
  --kbd-border: var(--color-neutral-300);
  --scrollbar-track: transparent;
  --scrollbar-thumb: var(--color-neutral-300);
  --dimed: 222 47% 11% / 0.9;
  --shadow-tooltip: 0 2px 4px hsl(var(--shadow-color) / 0.25);

  /* ========== L2 SEMANTIC — GRADIENTS (BACKGROUNDS ONLY) ========== */
  /* WARNING: NEVER apply to text — text-gradient is forbidden (§2.2, §7.8). */
  --gradient-primary: 243, 100%, 66%;
  --gradient-blue: 213, 94%, 68%;

  /* ========== L3 COMPONENT TOKENS ========== */
  /* Nav */
  --nav-background: var(--color-neutral-50);
  --nav-foreground: var(--color-neutral-900);
  --nav-border: var(--color-neutral-100);
  --nav-item-highlight: var(--color-brand-200);
  /* Sidebar */
  --sidebar-background: var(--color-neutral-50);
  --sidebar-foreground: var(--color-neutral-600);
  --sidebar-item-highlight: var(--color-neutral-200);
  --sidebar-border: var(--color-neutral-100);
  /* Table */
  --table-header: var(--color-neutral-50);
  --table-header-border: var(--color-neutral-300);
  --table-row-border: var(--color-neutral-100);
  --table-row-hover: var(--color-neutral-50);
  /* Tab */
  --tab-list-bg: var(--color-neutral-100);
  --tab-active-bg: var(--color-neutral-0);
  --tab-active-fg: var(--color-neutral-900);
  --tab-inactive-fg: var(--color-neutral-500);
  /* Footer */
  --footer-background: var(--color-neutral-0);
  --footer-foreground: var(--color-neutral-500);
  --footer-border: var(--color-neutral-100);
  /* Tooltip */
  --tooltip: var(--color-neutral-900);
  --tooltip-foreground: var(--color-neutral-0);
  /* Badge */
  --badge-default: var(--color-neutral-900);
  --badge-default-foreground: var(--color-neutral-0);
  /* Calendar */
  --calendar-selected: var(--color-brand-500);
  --calendar-selected-foreground: var(--color-neutral-0);
  --calendar-today: var(--color-neutral-100);
  --calendar-range-middle: var(--color-brand-50);
  --calendar-outside: var(--color-neutral-400);
  /* Command */
  --command-background: var(--color-neutral-0);
  --command-group-heading: var(--color-neutral-500);
  --command-item-selected: var(--color-neutral-100);
  /* Chart */
  --chart-1: var(--color-chart-1);
  --chart-2: var(--color-chart-2);
  --chart-3: var(--color-chart-3);
  --chart-4: var(--color-chart-4);
  --chart-5: var(--color-chart-5);
  --chart-6: var(--color-chart-6);
  --chart-7: var(--color-chart-7);
  --chart-8: var(--color-chart-8);
  --chart-9: var(--color-chart-9);
  --chart-10: var(--color-chart-10);

  /* ========== L1 PRIMITIVES — LAYOUT MAX-WIDTH ========== */
  --max-w-content: 1200px;
  --max-w-header: 1000px;
  --max-w-card: 384px;

  /* ========== SPACING SCALE ========== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  /* 64px 이상은 토큰 없음 — Tailwind class 직접 사용 */

  /* ========== RADIUS ========== */
  --radius: 0.5rem; /* 8px */
  --radius-lg: 1rem; /* 16px */

  /* ========== ELEVATION ========== */
  /* Keep aligned with the Product token source in this repo. */
  --shadow-sm: 0 1px 2px
    hsl(var(--shadow-color) / calc(var(--shadow-strength) + 0.02));
  --shadow-md:
    0 4px 6px -1px hsl(var(--shadow-color) / var(--shadow-strength)),
    0 2px 4px -2px hsl(var(--shadow-color) / var(--shadow-strength));
  --shadow-lg:
    0 10px 15px -3px hsl(var(--shadow-color) / 0.1),
    0 4px 6px -4px hsl(var(--shadow-color) / 0.1);
  --shadow-xl:
    0 20px 25px -5px hsl(var(--shadow-color) / 0.15),
    0 8px 10px -6px hsl(var(--shadow-color) / 0.15);

  /* ========== TRACKING / LEADING ========== */
  --tracking-display: -0.04em;
  --tracking-headline: -0.03em;
  --tracking-title: -0.02em;
  --tracking-body: 0;
  --tracking-label: +0.04em;
  --tracking-eyebrow: +0.1em;
  --tracking-uppercase: +0.06em;
  --leading-display: 1.05;
  --leading-headline: 1.15;
  --leading-title: 1.25;
  --leading-body: 1.55;
  --leading-caption: 1.45;
  --measure-body: 65ch;
  --measure-narrow: 45ch;
  --paragraph-gap: 0.75em;

  /* ========== MOTION ========== */
  /* Keep aligned with the Product token source in this repo. */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* ========== Z-INDEX (replace magic numbers) ========== */
  /* Keep aligned with the Product token source in this repo. */
  --z-sticky: 1100;
  --z-popover: 1300;
  --z-modal: 1400;
  --z-toast: 1500;
}

/* Dark mode overrides */
.dark {
  --background: var(--color-neutral-950);
  --subtle: var(--color-neutral-900);
  --foreground: var(--color-neutral-50);
  --card: var(--color-neutral-900);
  --card-foreground: var(--color-neutral-50);
  --card-border: var(--color-neutral-800);
  --popover: var(--color-neutral-950);
  --popover-foreground: var(--color-neutral-50);
  --popover-border: var(--color-neutral-800);
  --modal-bg: var(--color-neutral-900);
  --modal-border: var(--color-neutral-800);
  --modal-shadow: 0 20px 25px -5px hsl(var(--shadow-color) / 0.4);
  --shadow-color: 0 0% 0%;
  --shadow-strength: 0.3;

  --primary: var(--color-brand-400);
  --secondary-foreground: var(--color-neutral-950);
  --accent: var(--color-brand-900);
  --accent-foreground: var(--color-brand-100);
  --accent-border: var(--color-brand-800);
  --disabled: var(--color-neutral-700);
  --disabled-foreground: var(--color-neutral-400);
  --disabled-border: var(--color-neutral-700);

  --muted-light: var(--color-neutral-800);
  --muted: var(--color-neutral-800);
  --muted-soft: var(--color-neutral-700);
  --muted-medium: var(--color-neutral-600);
  --muted-foreground: var(--color-neutral-400);
  --muted-dark: var(--color-neutral-300);
  --muted-darker: var(--color-neutral-100);

  --border-subtle: var(--color-neutral-800);
  --border: var(--color-neutral-700);
  --border-medium: var(--color-neutral-600);
  --border-strong: var(--color-neutral-400);
  --border-dark: var(--color-neutral-500);
  --border-bold: var(--color-neutral-200);

  --input: var(--color-neutral-700);
  --input-hover: var(--color-neutral-600);
  --ring: var(--color-brand-900);
  --ring-offset: var(--color-neutral-900);

  --link: var(--color-brand-300);
  --link-hover: var(--color-brand-200);
  --selection-background: var(--color-brand-800);
  --selection-foreground: var(--color-brand-100);
  --code-background: var(--color-neutral-800);
  --code-foreground: var(--color-neutral-200);
  --kbd-background: var(--color-neutral-700);
  --kbd-foreground: var(--color-neutral-400);
  --kbd-border: var(--color-neutral-600);
  --scrollbar-thumb: var(--color-neutral-600);

  --gradient-primary: 243, 100%, 73%;
  --gradient-blue: 213, 94%, 75%;

  /* Component tokens */
  --nav-background: var(--color-neutral-900);
  --nav-foreground: var(--color-neutral-50);
  --nav-border: var(--color-neutral-700);
  --nav-item-highlight: var(--color-brand-800);
  --sidebar-background: var(--color-neutral-900);
  --sidebar-foreground: var(--color-neutral-300);
  --sidebar-item-highlight: var(--color-neutral-800);
  --sidebar-border: var(--color-neutral-700);
  --table-header: var(--color-neutral-800);
  --table-header-border: var(--color-neutral-700);
  --table-row-border: var(--color-neutral-700);
  --table-row-hover: var(--color-neutral-700);
  --tab-list-bg: var(--color-neutral-800);
  --tab-active-bg: var(--color-neutral-700);
  --tab-active-fg: var(--color-neutral-50);
  --tab-inactive-fg: var(--color-neutral-400);
  --footer-background: var(--color-neutral-900);
  --footer-foreground: var(--color-neutral-400);
  --footer-border: var(--color-neutral-700);
  --tooltip: var(--color-neutral-100);
  --tooltip-foreground: var(--color-neutral-900);
  --badge-default: var(--color-neutral-100);
  --badge-default-foreground: var(--color-neutral-900);
  --calendar-today: var(--color-neutral-700);
  --calendar-range-middle: var(--color-brand-950);
  --calendar-outside: var(--color-neutral-500);
  --command-background: var(--color-neutral-900);
  --command-group-heading: var(--color-neutral-300);
  --command-item-selected: var(--color-neutral-800);

  /* State bg overrides for dark mode (direct HSL — drift exception) */
  --state-success-bg: 163 88% 10%;
  --state-warning-bg: 39 100% 10%;
  --state-info-bg: 201 100% 10%;
  --state-error-bg: 350 86% 10%;
}