/* 카리스 허브 — 디자인 토큰
   무채색 + 단일 액센트, 라이트/다크 동등. */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  17px;
  --text-lg:  19px;
  --text-xl:  22px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  --tracking-tight: -0.022em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;

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

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;

  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --tap: 44px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms;
}

[data-theme="light"], .theme-light, :root {
  --bg:           #fafaf7;
  --bg-elev:      #ffffff;
  --bg-sunken:    #f3f2ed;
  --bg-overlay:   rgba(28, 26, 22, 0.45);

  --border-subtle: #ebe9e2;
  --border-base:   #dcd9d0;
  --border-strong: #b6b1a4;

  --text-primary:   #1c1a16;
  --text-secondary: #54514a;
  --text-tertiary:  #8a857a;
  --text-disabled:  #b6b1a4;
  --text-on-accent: #ffffff;

  --accent:           #b8552d;
  --accent-hover:     #a04a26;
  --accent-pressed:   #8a3f20;
  --accent-soft-bg:   #fbeee5;
  --accent-soft-text: #7a3818;
  --accent-ring:      rgba(184, 85, 45, 0.28);

  --success:        #3a7a48;
  --success-soft:   #e3efe3;
  --success-text:   #265533;
  --danger:         #b04545;
  --danger-soft:    #f6e3e1;
  --danger-text:    #7a2e2e;
  --warning:        #a06914;
  --warning-soft:   #f4ead0;
  --warning-text:   #6f4708;
  --info:           #4a6a8a;
  --info-soft:      #e3eaf2;
  --info-text:      #2f4660;

  --key-flat-bg:   #ece7f2;
  --key-flat-text: #4a3d70;
  --key-sharp-bg:  #f0e4dd;
  --key-sharp-text:#6e3a20;
  --key-natural-bg:#e3ece4;
  --key-natural-text:#2f5a3a;

  --shadow-sm: 0 1px 2px rgba(48, 40, 28, 0.06);
  --shadow-md: 0 2px 6px rgba(48, 40, 28, 0.06), 0 6px 16px rgba(48, 40, 28, 0.06);
  --shadow-lg: 0 4px 12px rgba(48, 40, 28, 0.08), 0 16px 36px rgba(48, 40, 28, 0.10);
  --focus-ring: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent);
}

[data-theme="dark"], .theme-dark {
  --bg:           #16140f;
  --bg-elev:      #1f1d17;
  --bg-sunken:    #0e0d0a;
  --bg-overlay:   rgba(0, 0, 0, 0.6);

  --border-subtle: #2a2820;
  --border-base:   #3a372e;
  --border-strong: #5a564a;

  --text-primary:   #f3f0e8;
  --text-secondary: #b3aea0;
  --text-tertiary:  #797466;
  --text-disabled:  #4d493e;
  --text-on-accent: #16140f;

  --accent:           #e08055;
  --accent-hover:     #ed8d62;
  --accent-pressed:   #c46a40;
  --accent-soft-bg:   #2e201a;
  --accent-soft-text: #f0a07a;
  --accent-ring:      rgba(224, 128, 85, 0.34);

  --success:        #6cb079;
  --success-soft:   #1d2a20;
  --success-text:   #9bd0a4;
  --danger:         #d97070;
  --danger-soft:    #2c1c1c;
  --danger-text:    #e8a0a0;
  --warning:        #d49b4a;
  --warning-soft:   #2a2114;
  --warning-text:   #e8c285;
  --info:           #7ea3c8;
  --info-soft:      #1b232c;
  --info-text:      #a6c1de;

  --key-flat-bg:   #2a2335;
  --key-flat-text: #b8a8e0;
  --key-sharp-bg:  #2e2218;
  --key-sharp-text:#e0a385;
  --key-natural-bg:#1f2a22;
  --key-natural-text:#9bd0a4;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.5), 0 16px 36px rgba(0,0,0,0.55);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

:root { color-scheme: light dark; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss06", "tnum";
}
button { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-tertiary); font-size: var(--text-sm); }
.eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase;
}