/* ============================================================
 * OpenCode.cloud — Design Tokens (Apple-style)
 * Source: docs/21-design.md §1
 * Do not hardcode colors / sizes elsewhere; consume from here.
 * ============================================================ */

:root {
  /* ============ Color: Apple light-first palette ============ */
  --c-bg-page:           #FBFBFD;
  --c-bg-alt:            #F5F5F7;
  --c-bg-dark:           #000000;
  --c-bg-dark-alt:       #1D1D1F;
  /* 段落级深底:浅色主题用温柔深灰,降低纯黑反差;暗色主题下回归纯黑。 */
  --c-bg-section-dark:       #1D1D1F;
  --c-bg-section-dark-glass: rgba(29, 29, 31, 0.72);
  --c-surface:           #FFFFFF;
  --c-surface-dark:      #1D1D1F;
  --c-text:              #1D1D1F;
  --c-text-mute:         #6E6E73;
  --c-text-inverse:      #F5F5F7;
  --c-text-inverse-mute: #A1A1A6;
  --c-link:              #0066CC;
  --c-link-hover:        #0077ED;
  --c-link-dark:         #2997FF;
  --c-accent-base:       #30D158;   /* open source */
  --c-accent-pro:        #FF9F0A;   /* commercial */
  --c-accent-blue:       #0071E3;
  --c-text-on-accent:    #FFFFFF;
  --c-border:            rgba(0, 0, 0, .1);
  --c-border-dark:       rgba(255, 255, 255, .12);

  /* base 段四层语义色 */
  --c-layer-core:         #0071E3;  /* Core(0xx)— 基础蓝 */
  --c-layer-foundation:   #30D158;  /* Foundation(1xx)— 稳定绿 */
  --c-layer-domain:       #BF5AF2;  /* Domain(2xx)— 领域紫 */
  --c-layer-business:     #FF9F0A;  /* Business(3xx)— 业务橙 */

  /* nav 背景:主题感知,在 dark 主题下自动切黑玻璃 */
  --c-nav-bg:     rgba(251, 251, 253, 0.72);
  --c-nav-border: rgba(0, 0, 0, 0.08);

  /* ============ Type scale ============ */
  --fs-display:  clamp(48px, 7vw, 96px);
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(28px, 3.2vw, 40px);
  --fs-h3:       clamp(22px, 2.4vw, 28px);
  --fs-eyebrow:  14px;
  --fs-body:     19px;
  --fs-small:    14px;
  --fs-xs:       12px;

  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.47;
  --ls-tight:    -0.022em;
  --ls-eyebrow:  0.04em;

  /* ============ Font stack ============ */
  --ff-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", system-ui, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ============ Spacing ============ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;
  --section-py:   clamp(80px, 12vw, 160px);
  --container-max: 1200px;
  --content-max:   980px;

  /* ============ Radius ============ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 980px;

  /* ============ Shadow (used sparingly) ============ */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .05);
  --shadow-pop:  0 12px 32px rgba(0, 0, 0, .12);

  /* ============ Motion ============ */
  --ease-apple:     cubic-bezier(0.42, 0, 0.58, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
}

/* ============ User-level dark theme override ============ */
html[data-theme="dark"] {
  --c-bg-page: #000;
  --c-bg-alt:  #1D1D1F;
  --c-surface: #1D1D1F;
  --c-text:    #F5F5F7;
  --c-text-mute: #A1A1A6;
  --c-link:    var(--c-link-dark);
  --c-border:  var(--c-border-dark);
  --c-bg-section-dark:       #000;
  --c-bg-section-dark-glass: rgba(0, 0, 0, 0.72);
  --c-nav-bg:     rgba(0, 0, 0, 0.72);
  --c-nav-border: rgba(255, 255, 255, 0.10);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --c-bg-page: #000;
    --c-bg-alt:  #1D1D1F;
    --c-surface: #1D1D1F;
    --c-text:    #F5F5F7;
    --c-text-mute: #A1A1A6;
    --c-link:    var(--c-link-dark);
    --c-border:  var(--c-border-dark);
    --c-bg-section-dark:       #000;
    --c-bg-section-dark-glass: rgba(0, 0, 0, 0.72);
    --c-nav-bg:     rgba(0, 0, 0, 0.72);
    --c-nav-border: rgba(255, 255, 255, 0.10);
  }
}