/*
 * design-system.css
 * Jios2 Design System — Color Tokens, Typography, Resets
 * Vanilla CSS only — NO Tailwind
 */

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* ─── Light Theme Variables ────────────────────────────────── */
:root {
  /* Primary palette — blue-purple gradient */
  --clr-primary:        hsl(225, 70%, 55%);   /* #3B6EE8 */
  --clr-primary-hover:  hsl(225, 70%, 48%);
  --clr-primary-light:  hsl(225, 70%, 94%);
  --clr-secondary:      hsl(262, 60%, 58%);   /* #7C51D4 */
  --clr-secondary-hover:hsl(262, 60%, 50%);
  --clr-gradient:       linear-gradient(135deg, hsl(225,70%,55%), hsl(262,60%,58%));
  --clr-gradient-hero:  linear-gradient(135deg, hsl(220,80%,50%), hsl(262,65%,55%), hsl(290,60%,55%));

  /* Semantic colors */
  --clr-success: hsl(152, 60%, 40%);
  --clr-warning: hsl(38,  90%, 48%);
  --clr-error:   hsl(0,   75%, 55%);
  --clr-info:    hsl(210, 80%, 52%);

  /* Backgrounds */
  --bg-page:      hsl(220, 20%, 97%);
  --bg-surface:   hsl(0,   0%,  100%);
  --bg-elevated:  hsl(220, 18%, 96%);
  --bg-overlay:   hsl(220, 16%, 92%);
  --bg-muted:     hsl(220, 14%, 88%);

  /* Text */
  --txt-primary:   hsl(225, 25%, 12%);
  --txt-secondary: hsl(225, 15%, 38%);
  --txt-muted:     hsl(225, 12%, 58%);
  --txt-disabled:  hsl(225, 10%, 72%);
  --txt-inverse:   hsl(0,   0%,  100%);

  /* Borders */
  --brd-default: hsl(220, 18%, 88%);
  --brd-strong:  hsl(220, 15%, 75%);
  --brd-focus:   var(--clr-primary);

  /* Shadows */
  --shadow-xs:  0 1px 2px hsla(220,30%,10%,.04);
  --shadow-sm:  0 2px 8px  hsla(220,30%,10%,.07);
  --shadow-md:  0 4px 16px hsla(220,30%,10%,.10);
  --shadow-lg:  0 8px 32px hsla(220,30%,10%,.13);
  --shadow-xl:  0 16px 48px hsla(220,30%,10%,.18);
  --shadow-card-hover: 0 20px 48px hsla(225,60%,40%,.18);

  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Typography */
  --font-body: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-zh:   'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;

  --lh-tight:  1.25;
  --lh-normal: 1.6;
  --lh-loose:  1.85;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Transitions */
  --tr-fast:   0.15s cubic-bezier(.4,0,.2,1);
  --tr-normal: 0.25s cubic-bezier(.4,0,.2,1);
  --tr-slow:   0.40s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --container-max: 1200px;
  --nav-height:    64px;
  --mobile-nav-h:  60px;
  --sidebar-w:     240px;

  /* Z-index layers */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ─── Dark Theme Variables ──────────────────────────────────── */
[data-theme="dark"] {
  --clr-primary:        hsl(225, 80%, 65%);
  --clr-primary-hover:  hsl(225, 80%, 58%);
  --clr-primary-light:  hsl(225, 60%, 20%);
  --clr-secondary:      hsl(262, 65%, 68%);
  --clr-secondary-hover:hsl(262, 65%, 60%);

  --bg-page:      hsl(230, 22%, 9%);
  --bg-surface:   hsl(230, 20%, 13%);
  --bg-elevated:  hsl(230, 18%, 17%);
  --bg-overlay:   hsl(230, 16%, 21%);
  --bg-muted:     hsl(230, 14%, 26%);

  --txt-primary:   hsl(220, 18%, 93%);
  --txt-secondary: hsl(220, 12%, 65%);
  --txt-muted:     hsl(220, 10%, 48%);
  --txt-disabled:  hsl(220,  8%, 34%);

  --brd-default: hsl(230, 18%, 24%);
  --brd-strong:  hsl(230, 15%, 32%);

  --shadow-xs:  0 1px 2px hsla(0,0%,0%,.20);
  --shadow-sm:  0 2px 8px  hsla(0,0%,0%,.28);
  --shadow-md:  0 4px 16px hsla(0,0%,0%,.35);
  --shadow-lg:  0 8px 32px hsla(0,0%,0%,.42);
  --shadow-xl:  0 16px 48px hsla(0,0%,0%,.50);
  --shadow-card-hover: 0 20px 48px hsla(225,70%,50%,.25);
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--txt-primary);
  background-color: var(--bg-page);
  transition: background-color var(--tr-normal), color var(--tr-normal);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Chinese text enhancement */
:lang(zh), [lang="zh-CN"] {
  font-family: var(--font-zh);
  line-height: var(--lh-loose);
}

a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color var(--tr-fast), opacity var(--tr-fast);
}

a:hover { opacity: .85; }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button { cursor: pointer; border: none; background: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--txt-primary);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p { color: var(--txt-secondary); line-height: var(--lh-loose); }

/* ─── Layout Utilities ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.container-sm  { max-width: 640px;  margin-inline: auto; padding-inline: var(--sp-4); }
.container-md  { max-width: 800px;  margin-inline: auto; padding-inline: var(--sp-5); }

.page-wrapper {
  padding-top: var(--nav-height);
  padding-bottom: var(--mobile-nav-h);
  min-height: 100vh;
}

@media (min-width: 768px) {
  .page-wrapper { padding-bottom: 0; }
}

/* Flex helpers */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2  { gap: var(--sp-2); }
.flex-gap-4  { gap: var(--sp-4); }
.flex-gap-6  { gap: var(--sp-6); }
.flex-1      { flex: 1; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-wrap   { flex-wrap: wrap; }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
}

/* Text utilities */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-primary   { color: var(--txt-primary); }
.text-secondary { color: var(--txt-secondary); }
.text-muted     { color: var(--txt-muted); }
.text-accent    { color: var(--clr-primary); }
.text-error     { color: var(--clr-error); }
.text-success   { color: var(--clr-success); }

.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.fs-sm   { font-size: var(--fs-sm); }
.fs-base { font-size: var(--fs-base); }
.fs-md   { font-size: var(--fs-md); }
.fs-lg   { font-size: var(--fs-lg); }

/* Gradient text */
.gradient-text {
  background: var(--clr-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Line clamp */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spacing utilities */
.mt-1  { margin-top: var(--sp-1); }
.mt-2  { margin-top: var(--sp-2); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-elevated); }
::-webkit-scrollbar-thumb { background: var(--bg-muted); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--txt-muted); }

/* Selection */
::selection { background: hsl(225,70%,55%,.25); color: var(--txt-primary); }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Misc */
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.w-full { width: 100%; }
.h-full { height: 100%; }
.rounded { border-radius: var(--r-md); }
.rounded-full { border-radius: var(--r-full); }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.pointer { cursor: pointer; }

/* ─── Alpine.js FOUC Prevention ─────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── Aspect Ratio Fallback ─────────────────────────────────── */
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }

/* ─── Image position helper ─────────────────────────────────── */
.card__image { position: relative; }