/* ============================================================
   Crowny Academy — Design Tokens (verdant 톤)
   arch.crowny.org 기반 · academy 라이트 변형
   ============================================================ */

:root {
  /* === Verdant Color Palette === */
  --color-bg-primary:   #fafaf7;
  --color-bg-secondary: #f3f4ed;
  --color-bg-elevated:  #ffffff;
  --color-fg-primary:   #1a2e1d;
  --color-fg-secondary: #4a5d4e;
  --color-fg-muted:     #7a8a7e;

  --color-accent:       #2d5a3f;
  --color-accent-light: #4a8862;
  --color-accent-hover: #245033;
  --color-accent-bg:    #e8efe8;
  --color-accent-glow:  rgba(45, 90, 63, 0.12);

  --color-warning:      #b87a20;
  --color-warning-bg:   #fdf3e0;
  --color-danger:       #b8453a;
  --color-danger-bg:    #fbeae9;
  --color-success:      #2d7a4a;
  --color-success-bg:   #e6f5ec;
  --color-info:         #305580;
  --color-info-bg:      #e6eef7;

  /* === Surface & Border === */
  --color-surface:      #ffffff;
  --color-surface-2:    #f6f7f2;
  --color-surface-3:    #edefea;
  --border-color:       #d8dad0;
  --border-color-light: #e8eae4;
  --border-color-focus: #2d5a3f;

  /* === Sidebar === */
  --sidebar-bg:         #1a2e1d;
  --sidebar-text:       #c8d8cc;
  --sidebar-text-muted: #7a9880;
  --sidebar-hover:      rgba(255,255,255,0.07);
  --sidebar-active-bg:  rgba(74,136,98,0.22);
  --sidebar-active:     #8ac49a;
  --sidebar-border:     rgba(255,255,255,0.08);
  --sidebar-width:      240px;

  /* === Header === */
  --header-bg:          rgba(250,250,247,0.95);
  --header-border:      #d8dad0;
  --header-height:      58px;

  /* === Typography === */
  --font-base: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'D2Coding', 'SF Mono', 'Consolas', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  /* === Spacing === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* === Border Radius === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* === Shadow === */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.12);

  /* === Transition === */
  --transition: 0.2s ease;
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Global Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: 1.6;
  background: var(--color-bg-primary);
  color: var(--color-fg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent-light); }