/* ==========================================================================
   TeamS Brand Tokens v1.1 — Merck-aligned Edition
   Official logo colors: TeamS Blue #1060B0 (CMYK 85/50/0/0) + Navy #003080
   Generated from TeamS_Brand_Identity_Principles_v1_1
   ========================================================================== */

:root {
  /* -- Primary ------------------------------------------------------------- */
  --ts-blue:        #1060B0;   /* logo symbol, buttons, links, H2 */
  --ts-blue-dark:   #0D4A8E;   /* button hover, deep accents */
  --ts-blue-50:     #E3EEF9;   /* sky light wash for info callouts */
  --ts-navy:        #003080;   /* korean subtext, dark sections, footer */
  --ts-navy-dark:   #001F55;   /* deepest dark bg */
  --ts-slate:       #2B3A4E;   /* body text, H1/H3 */
  --ts-gray:        #8C939A;   /* sub text, captions */
  --ts-gray-200:    #E0E4E8;   /* borders */
  --ts-gray-100:    #F0F3F7;   /* hover bg */

  /* -- Safety / Status ---------------------------------------------------- */
  --ts-warning:     #F4B400;   /* safety yellow */
  --ts-danger:      #D32F2F;   /* hazard red */
  --ts-success:     #2E7D32;   /* ground green */
  --ts-energy:      #E65100;   /* copper orange */

  /* -- Surface ----------------------------------------------------------- */
  --ts-white:       #FFFFFF;
  --ts-ice:         #F5F8FC;   /* alt section bg */
  --ts-sky:         #E3EEF9;   /* info callout */
  --ts-sand:        #FFF6E0;   /* caution callout */
  --ts-border:      #E0E4E8;

  /* -- Radius ------------------------------------------------------------ */
  --ts-radius-sm:   6px;       /* buttons, badges */
  --ts-radius-md:   12px;      /* cards, callouts */
  --ts-radius-lg:   24px;      /* hero blocks */
  --ts-radius-pill: 9999px;

  /* -- Shadow ------------------------------------------------------------ */
  --ts-shadow-sm:   0 1px 2px rgba(16, 96, 176, 0.08);
  --ts-shadow-md:   0 8px 24px rgba(16, 96, 176, 0.12);
  --ts-shadow-lg:   0 20px 48px rgba(0, 48, 128, 0.18);

  /* -- Typography -------------------------------------------------------- */
  --ts-font-kr:     "Pretendard", "NanumSquare", "Malgun Gothic", system-ui, sans-serif;
  --ts-font-en:     "Inter", "Arial", system-ui, sans-serif;
  --ts-font-mono:   "JetBrains Mono", "Consolas", ui-monospace, monospace;

  /* -- Type scale -------------------------------------------------------- */
  --ts-display-1:   clamp(40px, 5vw + 1rem, 64px);
  --ts-display-2:   clamp(32px, 3.5vw + 1rem, 48px);
  --ts-h1:          clamp(26px, 2vw + 1rem, 36px);
  --ts-h2:          clamp(22px, 1.2vw + 1rem, 28px);
  --ts-h3:          20px;
  --ts-body-lg:     18px;
  --ts-body:        16px;
  --ts-body-sm:     14px;

  /* -- Spacing scale (8px system) --------------------------------------- */
  --ts-sp-1:  4px;
  --ts-sp-2:  8px;
  --ts-sp-3:  12px;
  --ts-sp-4:  16px;
  --ts-sp-5:  24px;
  --ts-sp-6:  32px;
  --ts-sp-7:  48px;
  --ts-sp-8:  64px;
  --ts-sp-9:  96px;
  --ts-sp-10:128px;

  /* -- Layout ------------------------------------------------------------ */
  --ts-container: 1200px;
  --ts-header-h:  114px;

  /* -- Motion ------------------------------------------------------------ */
  --ts-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --ts-duration:    220ms;
}

/* -- Base reset & typography -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ts-font-kr);
  font-size: var(--ts-body);
  line-height: 1.65;
  color: var(--ts-slate);
  background: var(--ts-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { color: var(--ts-slate); margin: 0 0 var(--ts-sp-3); font-weight: 700; line-height: 1.25; }
h1 { font-size: var(--ts-h1); }
h2 { font-size: var(--ts-h2); color: var(--ts-blue); }
h3 { font-size: var(--ts-h3); }
p  { margin: 0 0 var(--ts-sp-4); }
a  { color: var(--ts-blue); text-decoration: none; transition: color var(--ts-duration) var(--ts-ease); }
a:hover { color: var(--ts-blue-dark); }

/* -- Utility: container ------------------------------------------------- */
.ts-container {
  max-width: var(--ts-container);
  margin: 0 auto;
  padding: 0 var(--ts-sp-5);
}
@media (max-width: 768px) { .ts-container { padding: 0 var(--ts-sp-4); } }

/* -- Buttons ----------------------------------------------------------- */
.ts-btn {
  display: inline-flex; align-items: center; gap: var(--ts-sp-2);
  padding: 12px 24px;
  font-family: inherit; font-size: var(--ts-body); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--ts-radius-sm);
  cursor: pointer;
  transition: all var(--ts-duration) var(--ts-ease);
  text-decoration: none;
}
.ts-btn--primary { background: var(--ts-blue); color: var(--ts-white); }
.ts-btn--primary:hover { background: var(--ts-blue-dark); color: var(--ts-white); box-shadow: var(--ts-shadow-md); }
.ts-btn--secondary { background: var(--ts-white); color: var(--ts-blue); border-color: var(--ts-blue); }
.ts-btn--secondary:hover { background: var(--ts-sky); }
.ts-btn--ghost { background: transparent; color: var(--ts-blue); }
.ts-btn--ghost:hover { background: var(--ts-gray-100); }
.ts-btn--dark { background: var(--ts-navy); color: var(--ts-white); }
.ts-btn--dark:hover { background: var(--ts-navy-dark); }
.ts-btn--lg { padding: 16px 32px; font-size: var(--ts-body-lg); }

/* -- Cards ------------------------------------------------------------- */
.ts-card {
  background: var(--ts-white);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius-md);
  padding: var(--ts-sp-5);
  transition: all var(--ts-duration) var(--ts-ease);
}
.ts-card:hover { border-color: var(--ts-blue); box-shadow: var(--ts-shadow-md); transform: translateY(-2px); }

/* -- Callouts --------------------------------------------------------- */
.ts-callout {
  border-radius: var(--ts-radius-md);
  padding: var(--ts-sp-4) var(--ts-sp-5);
  border-left: 4px solid var(--ts-blue);
  background: var(--ts-sky);
  margin: var(--ts-sp-5) 0;
}
.ts-callout--warning { border-left-color: var(--ts-warning); background: var(--ts-sand); }
.ts-callout--danger  { border-left-color: var(--ts-danger);  background: #FBE9E9; }
.ts-callout--success { border-left-color: var(--ts-success); background: #E6F2E6; }

/* -- Badges ----------------------------------------------------------- */
.ts-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  font-size: var(--ts-body-sm); font-weight: 600;
  border-radius: var(--ts-radius-pill);
  background: var(--ts-sky); color: var(--ts-blue);
}
.ts-badge--navy { background: var(--ts-navy); color: var(--ts-white); }
.ts-badge--success { background: #E6F2E6; color: var(--ts-success); }

/* -- Section spacing -------------------------------------------------- */
.ts-section { padding: var(--ts-sp-9) 0; }
.ts-section--dark { background: var(--ts-navy); color: var(--ts-white); }
.ts-section--dark h1, .ts-section--dark h2, .ts-section--dark h3 { color: var(--ts-white); }
.ts-section--dark h2 { color: #7FB3F0; }
.ts-section--ice { background: var(--ts-ice); }

/* -- Grid helpers ----------------------------------------------------- */
.ts-grid { display: grid; gap: var(--ts-sp-5); }
.ts-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ts-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ts-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .ts-grid--3, .ts-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ts-grid--2, .ts-grid--3, .ts-grid--4 { grid-template-columns: 1fr; }
}

/* -- Circuit (hero block background accent) --------------------------- */
.ts-circuit-tile {
  border-radius: var(--ts-radius-lg);
  background: var(--ts-blue);
  aspect-ratio: 1;
}
.ts-circuit-trace {
  height: 4px; background: var(--ts-blue); border-radius: var(--ts-radius-pill);
}
.ts-circuit-bus {
  height: 8px; background: var(--ts-navy); border-radius: var(--ts-radius-pill);
}

/* -- Currents (animated highlight) ------------------------------------ */
@keyframes ts-current-flow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -60; }
}
.ts-current path {
  fill: none;
  stroke: var(--ts-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 12 8;
  animation: ts-current-flow 8s linear infinite;
}

/* -- Kbd-style mono numbers ------------------------------------------ */
.ts-mono { font-family: var(--ts-font-mono); font-variant-numeric: tabular-nums; }

/* -- Screen-reader only ---------------------------------------------- */
.ts-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}