/*
 * ChallengeEnglish Platform — Design Tokens
 * All values referenced from README VISUAL FOUNDATIONS section.
 */

/* ==========================================================================
   1. Webfonts
   ========================================================================== */

@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-display: swap;
  font-style: normal;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

/* Inter for Latin + tabular numbers. Loaded via Google Fonts CDN. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   2. Color tokens
   ========================================================================== */

:root {
  /* --- Neutrals (slate scale) --- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;

  /* --- Brand (teal scale — matched to logo "200") --- */
  --teal-50:   #E3F3F3;   /* accent-soft: hover bg, selected row tint */
  --teal-100:  #BCE2E2;
  --teal-200:  #8CCBCC;
  --teal-300:  #5FB3B3;   /* pinned border (C-5a-fix2) */
  --teal-500:  #0E9594;   /* primary action — logo teal */
  --teal-600:  #0A7B7A;   /* primary hover */
  --teal-700:  #076362;

  /* --- Navy (from logo body text) --- */
  --navy-deep:  #0F172A;  /* sidebar bg, headings on light */
  --navy-mid:   #1E293B;  /* sidebar hover, borders on dark */
  --navy-soft:  #334155;

  /* --- Accent orange (Student Portal CTA only) --- */
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-50:  #FFF4ED;

  /* --- Semantic --- */
  --success-50:  #F0FDF4;
  --success-100: #DCFCE7;
  --success-600: #16A34A;
  --success-700: #15803D;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-600: #F59E0B;
  --warning-700: #B45309;

  --danger-50:   #FEF2F2;
  --danger-100:  #FEE2E2;
  --danger-600:  #DC2626;
  --danger-700:  #B91C1C;

  --info-50:     var(--teal-50);
  --info-100:    var(--teal-100);
  --info-600:    var(--teal-500);

  /* --- Semantic aliases (use these in components) --- */
  --bg-main:        #FFFFFF;
  --bg-surface:     var(--slate-50);
  --bg-surface-2:   var(--slate-100);

  --fg-primary:     var(--slate-900);
  --fg-secondary:   var(--slate-500);
  --fg-muted:       var(--slate-400);
  --fg-inverse:     #FFFFFF;

  --border:         var(--slate-200);
  --divider:        var(--slate-100);

  --accent:         var(--teal-500);
  --accent-hover:   var(--teal-600);
  --accent-soft:    var(--teal-50);

  /* Student portal accent — warmer CTA for learning surfaces */
  --accent-orange:         var(--orange-500);
  --accent-orange-hover:   var(--orange-600);
  --accent-orange-soft:    var(--orange-50);

  --success:        var(--success-600);
  --success-soft:   var(--success-50);
  --warning:        var(--warning-600);
  --warning-soft:   var(--warning-50);
  --danger:         var(--danger-600);
  --danger-soft:    var(--danger-50);

  /* --- Sidebar (dark navy — never lighten) --- */
  --sidebar-bg:         var(--navy-deep);
  --sidebar-hover:      var(--navy-mid);
  --sidebar-active:     var(--teal-500);   /* teal selection bar */
  --sidebar-text:       var(--slate-300);
  --sidebar-text-active:#FFFFFF;
  --sidebar-divider:    var(--navy-mid);

  /* --- Table --- */
  --table-header-bg:    var(--slate-50);
  --table-row-hover:    var(--slate-100);
  --table-border:       var(--slate-200);

  /* --- Tabs --- */
  --tab-active-underline: var(--teal-500);

  /* ============================================================
     Semantic Tokens (Phase D-1a)
     용도: 컴포넌트가 참조하는 의미별 토큰. Primitive(teal/slate/warning 등)는 값만,
     컴포넌트는 아래 --color-* 만 사용하여 테마 전환 가능하게 만든다.
     변경: 테마 전환 시 이 레이어만 override (.theme-* 클래스에서).
     원칙: 컴포넌트 CSS 는 Primitive 직접 참조 최소화. 차트·등급 밴드 등 예외 허용.
     ============================================================ */

  /* 1. Brand */
  --color-brand-primary:         var(--teal-500);
  --color-brand-primary-hover:   var(--teal-600);
  --color-brand-primary-pressed: var(--teal-700);
  --color-brand-primary-subtle:  var(--teal-50);
  --color-brand-secondary:       var(--navy-deep);
  --color-on-brand:              #ffffff;

  /* 2. Action & State — 의미 고정 (테마 전환에도 success/warning/danger 는 보존) */
  --color-action-success:         var(--teal-500);
  --color-action-success-subtle:  var(--teal-50);
  --color-action-warning:         var(--warning-600);
  --color-action-warning-subtle:  var(--warning-50);
  --color-action-danger:          var(--danger-600);
  --color-action-danger-subtle:   var(--danger-50);
  --color-action-info:            var(--teal-500);
  --color-action-info-subtle:     var(--teal-50);

  /* 3. Text */
  --color-text-primary:   var(--slate-900);
  --color-text-secondary: var(--slate-700);
  --color-text-muted:     var(--slate-500);
  --color-text-disabled:  var(--slate-400);
  --color-text-inverse:   #ffffff;
  --color-text-link:      var(--teal-600);
  --color-text-danger:    var(--danger-600);

  /* 4. Background */
  --color-bg-base:     var(--slate-50);
  --color-bg-subtle:   var(--slate-100);
  --color-bg-elevated: #ffffff;
  --color-bg-sunken:   var(--slate-50);
  --color-bg-brand:    var(--navy-deep);
  --color-bg-overlay:  rgba(15, 23, 42, 0.5);

  /* 5. Border */
  --color-border-default: var(--slate-200);
  --color-border-subtle:  var(--slate-100);
  --color-border-strong:  var(--slate-300);
  --color-border-focus:   var(--teal-500);
  --color-border-danger:  var(--danger-600);

  /* 6. Grade (모의고사 등급 1~9) — 의미 고정, 테마 전환 불변 */
  --color-grade-1: var(--teal-500);
  --color-grade-2: var(--teal-600);
  --color-grade-3: var(--warning-600);
  --color-grade-4: var(--warning-700);
  --color-grade-5: var(--danger-600);
  --color-grade-6: var(--danger-600);
  --color-grade-7: var(--danger-700);
  --color-grade-8: var(--danger-700);
  --color-grade-9: var(--danger-700);

  /* 7. Chart */
  --color-chart-bar-fill:  var(--teal-500);
  --color-chart-bar-track: var(--slate-100);
  --color-chart-line:      var(--teal-500);
  --color-chart-point:     var(--teal-500);

  /* 8. Pinned emphasis (C-5a-fix2) — brand-primary 계열로 테마 동조.
     "본사" 배지는 아래 --color-badge-hq-* 로 별도 관리 (의미 고정, 테마 독립). */
  --color-pinned-bg:     var(--teal-50);
  --color-pinned-border: var(--teal-300);
  --color-pinned-title:  var(--teal-700);
  --color-pinned-icon:   var(--teal-600);
  --color-pinned-hover-bg:     var(--teal-100);
  --color-pinned-hover-border: var(--teal-500);

  /* 9. "본사" 발신 배지 (C-5a-fix3) — 네이비 톤 고정, 테마 전환 무관.
     빨강=경고 시맨틱 오용이므로 네이비(정보/구조) 로 교체. */
  --color-badge-hq-bg:     var(--slate-100);
  --color-badge-hq-text:   var(--navy-deep);
  --color-badge-hq-border: var(--slate-300);

  /* 10. 날짜 상대/절대 강조 (C-5a-fix3) — 최근 7일 이내는 진하게, 그 이전은 흐리게 */
  --color-date-relative: var(--color-text-primary);
  --color-date-absolute: var(--color-text-muted);
}

/* ============================================================
   Themes — Phase D-1a
   브랜드 컬러(primary) 만 override. success/warning/danger 및 등급 밴드는 의미 고정.
   ============================================================ */

/* 기본 (Teal) = :root 값 그대로 */

.theme-yellow {
  --color-brand-primary:         var(--warning-600);
  --color-brand-primary-hover:   var(--warning-700);
  --color-brand-primary-pressed: #92400E;          /* amber-800 수준 */
  --color-brand-primary-subtle:  var(--warning-50);
  --color-border-focus:          var(--warning-600);
  --color-text-link:             var(--warning-700);
  --color-chart-bar-fill:        var(--warning-600);
  --color-chart-line:            var(--warning-600);
  --color-chart-point:           var(--warning-600);
  /* Pinned (yellow variant) */
  --color-pinned-bg:     var(--warning-50);
  --color-pinned-border: #FCD34D;   /* amber-300 */
  --color-pinned-title:  var(--warning-700);
  --color-pinned-icon:   var(--warning-600);
  --color-pinned-hover-bg:     var(--warning-100);
  --color-pinned-hover-border: var(--warning-600);
}

.theme-navy {
  --color-brand-primary:         var(--navy-deep);
  --color-brand-primary-hover:   var(--navy-mid);
  --color-brand-primary-pressed: #030712;
  --color-brand-primary-subtle:  var(--slate-100);
  --color-border-focus:          var(--navy-deep);
  --color-text-link:             var(--navy-deep);
  --color-chart-bar-fill:        var(--navy-deep);
  --color-chart-line:            var(--navy-deep);
  --color-chart-point:           var(--navy-deep);
  /* Pinned (navy variant) */
  --color-pinned-bg:     var(--slate-100);
  --color-pinned-border: var(--slate-400);
  --color-pinned-title:  var(--navy-deep);
  --color-pinned-icon:   var(--navy-mid);
  --color-pinned-hover-bg:     var(--slate-200);
  --color-pinned-hover-border: var(--navy-deep);
}

.theme-rose {
  --color-brand-primary:         #E11D48;  /* rose-600 */
  --color-brand-primary-hover:   #BE123C;  /* rose-700 */
  --color-brand-primary-pressed: #9F1239;  /* rose-800 */
  --color-brand-primary-subtle:  #FFF1F2;  /* rose-50 */
  --color-border-focus:          #E11D48;
  --color-text-link:             #BE123C;
  --color-chart-bar-fill:        #E11D48;
  --color-chart-line:            #E11D48;
  --color-chart-point:           #E11D48;
  /* Pinned (rose variant) */
  --color-pinned-bg:     #FFF1F2;   /* rose-50 */
  --color-pinned-border: #FDA4AF;   /* rose-300 */
  --color-pinned-title:  #BE123C;   /* rose-700 */
  --color-pinned-icon:   #E11D48;   /* rose-600 */
  --color-pinned-hover-bg:     #FFE4E6;   /* rose-100 */
  --color-pinned-hover-border: #E11D48;
}

/* `:root` 블록 닫기를 아래로 밀었으므로 원본 블록의 중괄호를 하나 더 닫기 위해
   이 규칙 블록 자체가 최초 `:root` 의 다음 선언으로 연결되도록 아래 빈 selector 유지 */
:root {

  /* ==========================================================================
     3. Typography tokens
     ========================================================================== */
  --font-sans: 'Pretendard', 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-latin: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Scale */
  --text-h1:       24px;
  --text-h2:       20px;
  --text-h3:       16px;
  --text-body:     14px;
  --text-caption:  12px;
  --text-micro:    11px;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --lh-heading: 1.3;
  --lh-body:    1.5;

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;

  /* ==========================================================================
     4. Spacing — 4px grid
     ========================================================================== */
  --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-16: 64px;

  /* ==========================================================================
     5. Radius
     ========================================================================== */
  --radius-sm:  4px;
  --radius:     6px;     /* buttons, inputs */
  --radius-md:  8px;     /* cards, modals */
  --radius-full: 9999px;

  /* ==========================================================================
     6. Elevation / shadow (minimal)
     ========================================================================== */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(14, 149, 148, 0.25);

  /* ==========================================================================
     7. Motion
     ========================================================================== */
  --dur-fast:   120ms;
  --dur-base:   150ms;
  --dur-slow:   220ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     8. Layout
     ========================================================================== */
  --shell-sidebar-w: 240px;  /* Part 1.5 §4.5 (240 expanded) — hotfix17.6: hotfix17.5 의 200 축소 회귀.
                                  좁은 viewport 대응은 메인 사이드바 auto-rail (< 1280) + 세션 토글 + Settings sub-nav 자체 다이어트로 분담. */
  --shell-header-h:  56px;
  --shell-content-pad: 24px;
}

/* ==========================================================================
   9. Base resets + type utilities
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-main);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic type classes — use these in components */
.h1, h1 { font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--lh-heading); letter-spacing: -0.02em; }
.h2, h2 { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--lh-heading); letter-spacing: -0.015em; }
.h3, h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--lh-heading); }
.body { font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--lh-body); }
.caption { font-size: var(--text-caption); font-weight: var(--weight-regular); color: var(--fg-secondary); }
.mono, .code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* .num — general numerics (amounts, counts, dates, phone): Pretendard tabular */
.num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ==========================================================================
   10. Minimal component classes (used by preview cards + ui kits)
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { height: 28px; padding: 0 10px; font-size: var(--text-caption); }
.btn-lg { height: 44px; padding: 0 18px; font-size: var(--text-h3); }

/* Phase D-1a: semantic 토큰으로 치환 — 테마 전환 반영 */
.btn-primary { background: var(--color-brand-primary); color: var(--color-on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--color-brand-primary-hover); }

.btn-secondary { background: var(--color-bg-elevated); color: var(--color-text-primary); border-color: var(--color-border-default); }
.btn-secondary:hover:not(:disabled) { background: var(--color-bg-subtle); }

.btn-ghost { background: transparent; color: var(--color-text-primary); }
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-subtle); }

.btn-danger { background: var(--color-action-danger); color: var(--color-on-brand); }
.btn-danger:hover:not(:disabled) { background: var(--danger-700); }

/* Phase D-1a: semantic 토큰 치환 */
.input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-elevated);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }
.input:disabled { background: var(--color-bg-sunken); color: var(--color-text-muted); }

.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.badge-neutral { background: var(--color-bg-subtle);           color: var(--color-text-secondary); }
.badge-info    { background: var(--color-action-info-subtle);  color: var(--teal-700); }
.badge-success { background: var(--color-action-success-subtle); color: var(--teal-700); }
.badge-warning { background: var(--color-action-warning-subtle); color: var(--warning-700); }
.badge-danger  { background: var(--color-action-danger-subtle);  color: var(--danger-700); }