:root {
  /* Light Mode Colors */
  --light-bg-default: #ffffff;
  --light-bg-elevated: #f8f9fb;
  --light-bg-contrast: #121212;
  --light-text-primary: #222222;
  --light-text-secondary: #666666;
  --light-text-inverse: #ffffff;
  --light-border: var(--neutral-200);

  /* Dark Mode Colors */
  --dark-bg-default: #1c1c1e;
  --dark-bg-elevated: #2c2c2e;
  --dark-bg-contrast: #f2f2f7;
  --dark-text-primary: #f2f2f7;
  --dark-text-secondary: #8e8e93;
  --dark-text-inverse: #1c1c1e;
  --dark-border: #38383a;

  /* Theme Variables (Light by default) */
  --bg-default: var(--light-bg-default);
  --bg-elevated: var(--light-bg-elevated);
  --bg-contrast: var(--light-bg-contrast);
  --text-primary: var(--light-text-primary);
  --text-secondary: var(--light-text-secondary);
  --text-inverse: var(--light-text-inverse);
  --border-color: var(--light-border);

  /* Brand blue from Starflow logo (fallback if not injected) */
  --brand-50: color-mix(in oklab, var(--brand-500), white 88%);
  --brand-100: color-mix(in oklab, var(--brand-500), white 80%);
  --brand-200: color-mix(in oklab, var(--brand-500), white 68%);
  --brand-300: color-mix(in oklab, var(--brand-500), white 56%);
  --brand-400: color-mix(in oklab, var(--brand-500), white 40%);
  --brand-500: #006EDB;
  --brand-600: color-mix(in oklab, var(--brand-500), black 14%);
  --brand-700: color-mix(in oklab, var(--brand-500), black 22%);

  /* Themed icon colors (sun/moon) */
  --sun-icon-fill: #FDB813;
  --sun-icon-stroke: #E99B1F;
  --sun-icon-fill-dark: #FFC94D;
  --moon-icon-fill: #9DB4FF;
  --moon-icon-fill-dark: #7AA2FF;

  /* Header overlay color (follows header bg by theme) */
  --header-overlay-rgb: 255, 255, 255; /* light: white base */

  /* Neutrals */
  --neutral-25: #fafafa;
  --neutral-50: #f5f5f7; /* Apple-like subtle gray */
  --neutral-75: #f0f0f3; /* Footer background - premium gray */
  --neutral-100: #ededf0;
  --neutral-200: #e5e5ea;
  --neutral-300: #d1d1d6;
  --neutral-400: #c7c7cc;
  --neutral-500: #8e8e93;
  --neutral-600: #6e6e73; /* Secondary text - Apple gray */
  --neutral-700: #3a3a3c;
  --neutral-900: #1c1c1e; /* matches requirement 0x121212~0x1C1C1E */

  /* Spacing scale (8px baseline) */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  
  /* Header specific */
  --header-padding: 8px; /* 进一步减薄导航栏高度（≈48px总高） */

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadows (subtle) */
  --shadow-xs: 0 1px 1px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);

  /* Dark Mode Shadows */
  --dark-shadow-xs: 0 1px 1px rgba(0,0,0,0.2);
  --dark-shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --dark-shadow-md: 0 8px 24px rgba(0,0,0,0.4);

  /* Typography - Inter首选，跨平台兼容 */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro Icons", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Typography Scale - 基于Apple规范 */
  --fs-hero: 56px;        /* Hero Headline */
  --fs-hero-sub: 28px;    /* Hero Subhead */
  --fs-callout: 19px;     /* Callout */
  --fs-section: 56px;     /* Section Header */
  --fs-store: 48px;       /* Store Header */
  --fs-secondary: 28px;   /* Secondary Header */
  --fs-card: 24px;        /* Card Header */
  --fs-body: 17px;        /* Body */
  --fs-button: 17px;      /* Button */
  --fs-caption: 14px;     /* Caption */
  --fs-small: 12px;       /* Small Print */

  /* Nav Typography（参考 Notion 导航的中粗权重与紧凑字距） */
  --nav-font-size: 15px;
  --nav-line-height: 1.3;
  --nav-letter-spacing: -0.01em; /* 轻微收紧，中文不拥挤，拉丁更饱满 */

  /* Line Heights */
  --lh-hero: 1.07;
  --lh-hero-sub: 1.14;
  --lh-callout: 1.21;
  --lh-section: 1.07;
  --lh-store: 1.08;
  --lh-secondary: 1.2;
  --lh-card: 1.16;
  --lh-body: 1.5;
  --lh-button: 1.17648;
  --lh-caption: 1.4;
  --lh-small: 1.3;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-apple: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Apple's button easing */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-button: 200ms; /* Apple button transition */
  --duration-slow: 360ms;
  
  /* Button Specific - 基于苹果官网精确分析 + 中文优化 */
  --btn-radius: 980px; /* Apple button radius - 胶囊形，高度36px时实际渲染为18px圆角 */
  --btn-padding-x: 28px; /* 增加水平padding - 适配中文字符密度 */
  --btn-padding-y: 8px; /* Apple button vertical padding - 字体17px+行高20px+padding16px=36px总高度 */
  --btn-min-height: 36px; /* Apple touch target - 精确计算后的高度 */
  --btn-letter-spacing: -0.022em; /* Apple button letter spacing */
  
  /* 导航栏按钮专用 */
  --btn-nav-font-size: 14px; /* 导航栏按钮字号 */
  --btn-nav-padding-x: 16px; /* 导航栏按钮水平内边距 */
  --btn-nav-padding-y: 6px; /* 导航栏按钮垂直内边距 */
  --btn-nav-min-height: 32px; /* 导航栏按钮高度 */
  --btn-nav-radius: 980px; /* 导航栏按钮圆角：胶囊形，与Hero一致 */
}

/* Dark Mode Theme Override */
.dark {
  --bg-default: var(--dark-bg-default);
  --bg-elevated: var(--dark-bg-elevated);
  --bg-contrast: var(--dark-bg-contrast);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  --text-inverse: var(--dark-text-inverse);
  --border-color: var(--dark-border);
  --shadow-xs: var(--dark-shadow-xs);
  --shadow-sm: var(--dark-shadow-sm);
  --shadow-md: var(--dark-shadow-md);
  --header-overlay-rgb: 28, 28, 30; /* dark: matches .dark .nl-header background */
}

/* System Preference Dark Mode */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg-default: var(--dark-bg-default);
    --bg-elevated: var(--dark-bg-elevated);
    --bg-contrast: var(--dark-bg-contrast);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-inverse: var(--dark-text-inverse);
    --border-color: var(--dark-border);
    --shadow-xs: var(--dark-shadow-xs);
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
  }
}

@media (max-width: 1199px) {
  :root {
    --fs-hero: 48px;        /* 缩小 15% */
    --fs-section: 48px;     /* 缩小 15% */
    --fs-store: 42px;       /* 缩小 12% */
  }
}

@media (max-width: 767px) {
  :root {
    --fs-hero: 36px;        /* Mobile主标题 */
    --fs-hero-sub: 22px;    /* Mobile副标题 */
    --fs-section: 36px;     /* Mobile区块标题 */
    --fs-secondary: 24px;   /* Mobile二级标题 */
    --fs-store: 32px;       /* Mobile商店标题 */
    --fs-card: 20px;        /* Mobile卡片标题 */
  }
}

@media (max-width: 479px) {
  :root {
    --fs-body: 16px;        /* 保持可读性 */
    --fs-button: 16px;      /* 保持点击目标 */
  }
}