/* KeepFun — 操场来信 / Design tokens v1.0
 * Single source of truth. Edit primitives to retheme the website.
 * For an existing app, scope to .keepfun-theme or import the mapping example
 * in docs/design-system.md. These values are normal CSS colors, not HSL tuples.
 */
:root {
  /* Brand primitives */
  --kf-forest-950: #172f23;
  --kf-forest-900: #203d2e;
  --kf-forest-800: #254e39;
  --kf-forest-600: #4b6a50;
  --kf-forest-300: #afc198;
  --kf-forest-200: #cedaa9;
  --kf-track-700: #99391f;
  --kf-track-600: #bb4c2c;
  --kf-track-500: #cb5936;
  --kf-sun-400: #efcc72;
  --kf-cream-50: #fffdf5;
  --kf-cream-100: #f7f5ec;
  --kf-cream-200: #ececdf;
  --kf-neutral-500: #5e6b60;
  --kf-neutral-300: #c8cec0;
  --kf-neutral-200: #d9ddd0;
  --kf-white: #ffffff;
  --kf-skin: #dca57e;

  /* Semantic surfaces, content and interaction */
  --kf-background: var(--kf-cream-100);
  --kf-surface: var(--kf-cream-50);
  --kf-surface-muted: var(--kf-cream-200);
  --kf-foreground: var(--kf-forest-900);
  --kf-foreground-muted: var(--kf-neutral-500);
  --kf-primary: var(--kf-forest-800);
  --kf-primary-hover: var(--kf-forest-950);
  --kf-primary-foreground: var(--kf-cream-50);
  --kf-accent: var(--kf-track-600);
  --kf-accent-hover: var(--kf-track-700);
  --kf-accent-soft: color-mix(in srgb, var(--kf-track-500) 10%, var(--kf-background));
  --kf-secondary: var(--kf-forest-200);
  --kf-secondary-foreground: var(--kf-forest-900);
  --kf-border: var(--kf-neutral-200);
  --kf-border-strong: var(--kf-neutral-300);
  --kf-focus-ring: var(--kf-track-600);
  --kf-success: #28603d;
  --kf-success-soft: #e4eddf;
  --kf-warning: #84540d;
  --kf-warning-soft: #f5ecd0;
  --kf-danger: #a93630;
  --kf-danger-soft: #f8e5df;
  --kf-info: #31566e;
  --kf-info-soft: #e7eef0;
  --kf-inverse-background: var(--kf-forest-950);
  --kf-inverse-foreground: var(--kf-cream-50);
  --kf-inverse-muted: #c6d1be;

  /* Typography */
  --kf-font-body: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --kf-font-editorial: "Songti SC", "Noto Serif SC", Georgia, serif;
  --kf-text-xs: .75rem;
  --kf-text-sm: .875rem;
  --kf-text-base: 1rem;
  --kf-text-lg: 1.125rem;
  --kf-text-xl: 1.375rem;
  --kf-text-h1: clamp(2.25rem, 4.3vw, 4.25rem);
  --kf-text-h2: clamp(1.8rem, 3vw, 3rem);
  --kf-text-h3: clamp(1.25rem, 2vw, 1.6rem);
  --kf-leading-body: 1.8;
  --kf-leading-heading: 1.35;
  --kf-weight-regular: 400;
  --kf-weight-medium: 500;
  --kf-weight-bold: 600;

  /* Spacing, shape, layout */
  --kf-space-1: .25rem;
  --kf-space-2: .5rem;
  --kf-space-3: .75rem;
  --kf-space-4: 1rem;
  --kf-space-5: 1.25rem;
  --kf-space-6: 1.5rem;
  --kf-space-8: 2rem;
  --kf-space-10: 2.5rem;
  --kf-space-12: 3rem;
  --kf-space-16: 4rem;
  --kf-space-20: 5rem;
  --kf-space-24: 6rem;
  --kf-radius-sm: .375rem;
  --kf-radius-md: .75rem;
  --kf-radius-lg: 1.25rem;
  --kf-radius-xl: 2rem;
  --kf-radius-pill: 999px;
  --kf-layout-max: 1240px;
  --kf-layout-gutter: clamp(1.25rem, 4vw, 3rem);
  --kf-section-space: clamp(4rem, 8vw, 7rem);
  --kf-header-height: 88px;
  --kf-shadow-sm: 0 6px 18px color-mix(in srgb, var(--kf-forest-950) 6%, transparent);
  --kf-shadow-md: 0 18px 50px color-mix(in srgb, var(--kf-forest-950) 10%, transparent);
  --kf-shadow-lg: 0 30px 80px color-mix(in srgb, var(--kf-forest-950) 16%, transparent);

  /* Motion */
  --kf-duration-fast: 180ms;
  --kf-duration-base: 320ms;
  --kf-duration-reveal: 800ms;
  --kf-ease: cubic-bezier(.22, 1, .36, 1);
  --kf-float-distance: 12px;
}

/* Optional service-site dark theme. The marketing website remains light. */
.keepfun-theme[data-theme="dark"] {
  --kf-background: #17231c;
  --kf-surface: #23352a;
  --kf-surface-muted: #2d4233;
  --kf-foreground: #f3f3e7;
  --kf-foreground-muted: #b7c4b2;
  --kf-primary: #cedaa9;
  --kf-primary-hover: #e2e9c8;
  --kf-primary-foreground: #172f23;
  --kf-accent: #f0a07e;
  --kf-accent-hover: #f8baa0;
  --kf-secondary: #354c38;
  --kf-secondary-foreground: #e2e9c8;
  --kf-border: #405543;
  --kf-border-strong: #5e735d;
  --kf-focus-ring: #efcc72;
  --kf-success: #a5d6ae;
  --kf-warning: #efcc72;
  --kf-danger: #f4aaa0;
  --kf-info: #a8cbe0;
}

@media (prefers-reduced-motion: reduce) {
  :root { --kf-duration-fast: 0ms; --kf-duration-base: 0ms; --kf-duration-reveal: 0ms; --kf-float-distance: 0px; }
}