/* ============================================================
   天齐集团品牌官网 — 全局样式
   Global CSS Variables, Reset & Base Typography
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
  /* == Colors (OKLCH) == */
  --color-primary:       oklch(0.58 0.14 198);
  --color-primary-hover: oklch(0.52 0.14 198);
  --color-primary-light: oklch(0.92 0.028 198);
  --color-primary-dark:  oklch(0.42 0.12 198);

  --color-bg:            oklch(1.000 0.000 0);
  --color-surface:       oklch(0.965 0.003 200);
  --color-surface-alt:   oklch(0.94 0.005 200);

  --color-ink:           oklch(0.15 0.007 200);
  --color-ink-light:     oklch(0.30 0.007 200);
  --color-muted:         oklch(0.52 0.005 200);

  --color-accent:        oklch(0.68 0.145 78);
  --color-accent-hover:  oklch(0.73 0.155 78);
  --color-accent-light:  oklch(0.94 0.06 78);

  --color-border:        oklch(0.88 0.003 200);
  --color-white:         oklch(1.000 0.000 0);

  /* == Typography == */
  --font-sans:   "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
                 -apple-system, "Helvetica Neue", sans-serif;
  --font-display: "PingFang SC", "Microsoft YaHei",
                 -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:   "JetBrains Mono", "Fira Code", "SF Mono",
                 "Consolas", "Menlo", monospace;

  /* Type Scale */
  --text-xs:     0.75rem;    /* 12px */
  --text-sm:     0.875rem;   /* 14px */
  --text-base:   1rem;       /* 16px */
  --text-lg:     1.125rem;   /* 18px */
  --text-xl:     1.25rem;    /* 20px */
  --text-2xl:    1.5rem;     /* 24px */
  --text-3xl:    2rem;       /* 32px */
  --text-4xl:    2.5rem;     /* 40px */

  /* Hero heading: responsive clamp */
  --text-hero:   clamp(2.25rem, 5vw, 4.5rem);
  /* Section heading */
  --text-section: clamp(1.75rem, 3.5vw, 3rem);
  /* Sub heading */
  --text-sub:    clamp(1.25rem, 2.5vw, 1.75rem);
  /* Data number */
  --text-number: clamp(1.5rem, 3vw, 2.25rem);

  /* Font weights */
  --weight-normal: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* == Spacing (8px base) == */
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */
  --space-5xl:  8rem;      /* 128px */

  /* Section gap */
  --section-gap: var(--space-4xl);
  --section-gap-mobile: var(--space-3xl);

  /* == Layout == */
  --content-max: 1200px;
  --content-narrow: 720px;
  --header-height: 72px;

  /* == Shadows == */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.12);

  /* == Border Radius == */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full: 9999px;

  /* == Transitions == */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-reveal: 700ms;

  /* == Z-index Scale == */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

/* ============================================================
   Base Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
h1 { line-height: var(--leading-tight); }
h2 { line-height: 1.2; }
h3 { line-height: var(--leading-snug); }
h4, h5, h6 { line-height: 1.4; }

h1 { font-size: var(--text-hero);    text-wrap: balance; }
h2 { font-size: var(--text-section); text-wrap: balance; }
h3 { font-size: var(--text-sub);     text-wrap: balance; }
h4 { font-size: var(--text-lg);      font-weight: var(--weight-semibold); }

p {
  max-width: var(--content-narrow);
  text-wrap: pretty;
}

/* Links within prose */
.prose a,
.content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
.prose a:hover,
.content a:hover {
  color: var(--color-primary-hover);
}

/* ============================================================
   Utility Classes
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

.container-narrow {
  max-width: var(--content-narrow);
  margin-inline: auto;
}

.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;
}

/* Section spacing */
.section {
  padding-block: var(--section-gap);
}

/* Background variants */
.bg-white     { background-color: var(--color-bg); }
.bg-surface   { background-color: var(--color-surface); }
.bg-alt       { background-color: var(--color-surface-alt); }
.bg-primary   { background-color: var(--color-primary); color: var(--color-white); }
.bg-dark      { background-color: var(--color-ink); color: var(--color-white); }

/* Text colors */
.text-muted   { color: var(--color-muted); }
.text-accent  { color: var(--color-accent); }
.text-primary  { color: var(--color-primary); }

/* ============================================================
   Responsive Utilities
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --section-gap: var(--section-gap-mobile);
  }

  .container {
    padding-inline: var(--space-lg);
  }

  .hide-mobile {
    display: none !important;
  }
}

/* Reduced motion: global override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}