/* ============================================================
   OUTDOOR WEB · Design Tokens (Flat / Modern)
   Senior Developer · 2026
   ============================================================ */

/* ---------- Theme: Light (default) ---------- */
:root {
  /* Brand & accent — 渐变体系：#1EE5AA / #1BDAA3 / #FDBE2E / #695DFC */
  --c-brand:        #1EE5AA;   /* mint-green · primary */
  --c-brand-600:    #1BDAA3;
  --c-brand-700:    #15c79a;
  --c-accent:       #FDBE2E;   /* amber · energy / CTA */
  --c-accent-600:   #f0ad17;
  --c-info:         #695DFC;   /* purple */
  --c-purple:       #695DFC;
  --c-warn:         #f0ad17;
  --c-danger:       #f03e3e;
  --c-success:      #2f9e44;

  /* Gradients (the four brand colors) */
  --grad-brand:   linear-gradient(120deg, #1EE5AA 0%, #1BDAA3 40%, #FDBE2E 72%, #695DFC 100%);
  --grad-primary: linear-gradient(120deg, #1EE5AA 0%, #1BDAA3 100%);
  --grad-accent:  linear-gradient(120deg, #FDBE2E 0%, #695DFC 100%);

  /* Glass morphism tokens */
  --glass-bg:     rgba(255, 255, 255, .65);
  --glass-line:   rgba(255, 255, 255, .55);
  --glass-shadow: 0 8px 30px rgba(16, 24, 40, .10);

  /* Neutrals */
  --c-bg:           #f6f8fa;
  --c-surface:      #ffffff;
  --c-surface-2:    #eef2f6;
  --c-ink:          #101828;
  --c-ink-2:        #344054;
  --c-muted:        #667085;
  --c-faint:        #98a2b3;
  --c-line:         #e4e7ec;
  --c-line-strong:  #d0d5dd;

  /* Functional */
  --c-on-brand:     #ffffff;
  --c-on-accent:    #ffffff;
  --c-overlay:      rgba(16, 24, 40, 0.55);
  --c-shadow:       0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
  --c-shadow-sm:    0 1px 2px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.06);

  /* Typography */
  --font-sans: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.3rem, 2.4vw, 1.6rem);
  --fs-xl:   clamp(1.8rem, 3.4vw, 2.4rem);
  --fs-xxl:  clamp(2.4rem, 5vw, 3.4rem);

  /* Radii (flat but friendly) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Layout */
  --maxw: 1200px;
  --gap: 20px;
  --header-h: 64px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Theme: Dark ---------- */
[data-theme="dark"] {
  --c-bg:           #0b0f14;
  --c-surface:      #141a21;
  --c-surface-2:    #1b232c;
  --c-ink:          #e7ecf0;
  --c-ink-2:        #c2cad3;
  --c-muted:        #98a2b3;
  --c-faint:        #7b8794;
  --c-line:         #243038;
  --c-line-strong:  #2f3c46;

  --c-brand:        #2bf0c0;
  --c-brand-600:    #1BDAA3;
  --c-brand-700:    #15c79a;
  --c-accent:       #FDBE2E;
  --c-accent-600:   #f0ad17;
  --c-purple:       #8b82ff;

  --glass-bg:     rgba(17, 23, 30, .55);
  --glass-line:   rgba(255, 255, 255, .12);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, .45);

  --c-on-brand:     #06231c;
  --c-on-accent:    #2a1304;
  --c-overlay:      rgba(0, 0, 0, .62);
  --c-shadow:       0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --c-shadow-sm:    0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.4);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; color: var(--c-ink); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--c-brand) 50%, transparent); outline-offset: 2px; }

/* ---------- Glass morphism + gradient helpers ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}