/* 자동 생성 — 손으로 고치지 말 것.
 * 생성: pnpm design:tokens   (harness/design/generate-tokens.mjs)
 * 원본: harness/design/tokens.json
 * 스펙: docs/superpowers/specs/2026-08-20-soritune-design-system-design.md
 */

/* 원시값과 축을 안 타는 것. 여기 있는 값은 테마·밀도가 바뀌어도 그대로다. */
:root {
  --brand-50: #FFF3EA;
  --brand-100: #FFE7D5;
  --brand-200: #FFC9A8;
  --brand-300: #FFA972;
  --brand-400: #FF8534;
  --brand-500: #FE6400;
  --brand-600: #E55A00;
  --brand-700: #C84E00;
  --brand-800: #9E3E00;
  --amber-400: #F7DC0E;
  --amber-500: #FBB628;
  --amber-600: #D99413;
  --ink-50: #F8FAFC;
  --ink-100: #F1F5F9;
  --ink-200: #E2E8F0;
  --ink-300: #CBD5E1;
  --ink-400: #94A3B8;
  --ink-500: #64748B;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1E293B;
  --ink-900: #0F172A;
  --ink-950: #151E23;
  --status-success: #16A34A;
  --status-warning: #D97706;
  --status-danger: #DC2626;
  --status-info: #2563EB;
  --status-focus: #1D4ED8;
  --status-dark-success: #22C55E;
  --status-dark-warning: #F59E0B;
  --status-dark-danger: #F87171;
  --status-dark-info: #60A5FA;
  --status-dark-focus: #60A5FA;
  --chart-light-1: #2563EB;
  --chart-light-2: #16A34A;
  --chart-light-3: #D97706;
  --chart-light-4: #DC2626;
  --chart-light-5: #7C3AED;
  --chart-light-6: #0891B2;
  --chart-light-7: #65A30D;
  --chart-light-8: #EA580C;
  --chart-dark-1: #60A5FA;
  --chart-dark-2: #4ADE80;
  --chart-dark-3: #FBBF24;
  --chart-dark-4: #F87171;
  --chart-dark-5: #C084FC;
  --chart-dark-6: #22D3EE;
  --chart-dark-7: #A3E635;
  --chart-dark-8: #FB923C;
  --status-strong-success: #15803D;
  --status-strong-warning: #B45309;
  --status-strong-danger: #B91C1C;
  --status-strong-info: #1D4ED8;
  --status-strong-dark-success: #4ADE80;
  --status-strong-dark-warning: #FBBF24;
  --status-strong-dark-danger: #FCA5A5;
  --status-strong-dark-info: #93C5FD;
  --status-deep-success: #1B5E20;
  --status-deep-info: #0D47A1;
  --status-deep-dark-success: #86EFAC;
  --status-deep-dark-info: #BFDBFE;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(.2,.8,.3,1);
  --ease-in: cubic-bezier(.5,0,.75,0);
  --ease-soft: cubic-bezier(.22,.85,.3,1);
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 10000;
  --elevation-xs: 0 1px 2px rgba(21,30,35,.06);
  --elevation-sm: 0 1px 3px rgba(21,30,35,.08);
  --elevation-md: 0 4px 12px rgba(21,30,35,.10);
  --elevation-lg: 0 8px 32px rgba(21,30,35,.10);
  --elevation-xl: 0 18px 48px rgba(21,30,35,.20);
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, 'D2Coding', monospace;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --glass-L1-blur: 28px;
  --glass-L1-saturate: 190%;
  --glass-L1-hi-blur: 36px;
  --glass-L1-hi-saturate: 200%;
  --glass-L2-blur: 14px;
  --glass-L2-saturate: 170%;
  --glass-angle: 140deg;
}

/*
 * 밝은 테마.
 *
 * **:root 만으로는 부족하다.** 어두운 조상 안에 밝은 섬을 두려면
 * (data-theme="light" 를 붙인 요소) 그 자리에서 값을 되돌릴 선택자가 있어야 한다 —
 * 없으면 조상의 다크 값이 그대로 상속되어 섬이 안 끊긴다.
 * theme.ts 의 surfaceAttrs 가 "명시하면 그 자리에서 끊고 새로 정한다" 고 약속하므로
 * 그 약속을 여기서 실제로 지킨다.
 *
 * 밀도와 따로 두는 것도 그래서다. 한 덩어리로 묶으면 밝은 섬이 밀도까지 되돌린다.
 */
:root, [data-theme="light"] {
  --color-bg-canvas: #FBF6F1;
  --color-bg-surface: #FFFFFF;
  --color-bg-surface-soft: #F8FAFC;
  --color-bg-raised: #F1F5F9;
  --color-bg-brand-tint: #FFF3EA;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-text-on-brand: #FFFFFF;
  --color-text-brand: #C84E00;
  --color-border-default: #151E231A;
  --color-border-strong: #CBD5E1;
  --color-status-success: #16A34A;
  --color-status-warning: #D97706;
  --color-status-danger: #DC2626;
  --color-status-info: #2563EB;
  --color-status-focus: #1D4ED8;
  --color-text-brand-on-tint: #9E3E00;
  --color-status-success-strong: #15803D;
  --color-status-warning-strong: #B45309;
  --color-status-danger-strong: #B91C1C;
  --color-status-info-strong: #1D4ED8;
  --color-status-success-deep: #1B5E20;
  --color-status-info-deep: #0D47A1;
  --glass-L1-tint: #FFFFFF99;
  --glass-L1-grad: #FE640033 0%, #FBB6281C 42%, #FBB62800 80%;
  --glass-L1-hi-tint: #FFFFFFBD;
  --glass-L1-hi-grad: #FE640038 0%, #FBB6281F 44%, #FBB62800 82%;
  --glass-L2-tint: #FFFFFFD6;
  --glass-L2-grad: #FE64001A 0%, #FBB6280D 48%, #FBB62800 84%;
  --glass-stroke: #FFFFFFB3;
  --glass-inner-top: #FFFFFFE0;
}

/* 다크 — 시맨틱만 갈아탄다. 원시값은 그대로다. */
[data-theme="dark"] {
  --color-bg-canvas: #0A0F14;
  --color-bg-surface: #151E25;
  --color-bg-surface-soft: #1B252D;
  --color-bg-raised: #1E293B;
  --color-bg-brand-tint: #1E293B;
  --color-text-primary: #F1F5F9;
  --color-text-secondary: #A8B6C4;
  --color-text-muted: #94A3B8;
  --color-text-on-brand: #FFFFFF;
  --color-text-brand: #FFA972;
  --color-border-default: #FFFFFF1A;
  --color-border-strong: #334155;
  --color-status-success: #22C55E;
  --color-status-warning: #F59E0B;
  --color-status-danger: #F87171;
  --color-status-info: #60A5FA;
  --color-status-focus: #60A5FA;
  --color-text-brand-on-tint: #FFC9A8;
  --color-status-success-strong: #4ADE80;
  --color-status-warning-strong: #FBBF24;
  --color-status-danger-strong: #FCA5A5;
  --color-status-info-strong: #93C5FD;
  --color-status-success-deep: #86EFAC;
  --color-status-info-deep: #BFDBFE;
  --glass-L1-tint: #161F268A;
  --glass-L1-grad: #FE640047 0%, #FBB62821 42%, #FBB62800 80%;
  --glass-L1-hi-tint: #161F26B8;
  --glass-L1-hi-grad: #FE64004D 0%, #FBB62826 44%, #FBB62800 82%;
  --glass-L2-tint: #161F26C7;
  --glass-L2-grad: #FE640024 0%, #FBB62812 48%, #FBB62800 84%;
  --glass-stroke: #FFFFFF24;
  --glass-inner-top: #FFFFFF29;
}

/* 학습자 밀도 — 위와 같은 이유로 되돌릴 선택자를 함께 둔다. */
:root, [data-density="learner"] {
  --corner-sm: 10px;
  --corner-md: 14px;
  --corner-lg: 20px;
  --corner-xl: 28px;
  --corner-full: 999px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --row-height: 56px;
  --min-touch: 44px;
}

/* 관리자 밀도 — 라운드와 글자 크기만 갈아탄다. 간격은 축을 타지 않는다. */
[data-density="admin"] {
  --corner-sm: 6px;
  --corner-md: 8px;
  --corner-lg: 12px;
  --corner-xl: 16px;
  --corner-full: 999px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --row-height: 40px;
  --min-touch: 32px;
}