/* Auto-generated from canvas.json — do not hand-edit color hex without re-running fig-to-tokens.js */
:root {
  /* Colors */
  --brand-500: #FFAD35;
  --brand-300: #FFB74D;
  --brand-glow: rgba(255, 158, 15, 0.5);
  /* 画布：Design SVG 根 rect fill="black"；#111 仅卡片/页脚等局部 */
  --bg-page: #000000;
  --bg-900: #111111;
  --bg-800: #212121;
  --bg-950: #0A0A0A;
  --bg-black: #000000;
  --text-primary: #FFFFFF;
  --text-secondary: #B3B3B3;
  --text-tertiary: #858585;
  --text-muted: #D1D1D6;
  --surface-light: #FAFAFA;
  --success: #34C759;
  --overlay-80: rgba(17, 17, 17, 0.8);
  /* Header: 78% 透明度 → 黑色底 22% 不透明度 */
  --header-bg: rgba(0, 0, 0, 0.22);
  --border-input: #323232;

  /* Typography families */
  --font-sans: 'Poppins', 'Noto Sans TC', system-ui, sans-serif;
  --font-display: 'Poppins', 'Noto Sans TC', sans-serif;
  --font-inter: 'Inter', 'Noto Sans TC', sans-serif;
  --type-h1-size: 4rem;
  --type-h1-line-height: 4.625rem;
  --type-h1-weight: 500;
  --type-h1-letter-spacing: -0.04em;
  --type-h2-size: 3.375rem;
  --type-h2-line-height: 3.9375rem;
  --type-h2-weight: 500;
  --type-h2-letter-spacing: -0.04em;
  --type-h3-size: 2rem;
  --type-h3-line-height: 2.375rem;
  --type-h3-weight: 500;
  --type-h3-letter-spacing: -0.04em;
  --type-h4-size: 1.25rem;
  --type-h4-line-height: 1.75rem;
  --type-h4-weight: 500;
  --type-h4-letter-spacing: -0.04em;
  --type-body-size: 1rem;
  --type-body-line-height: 1.5rem;
  --type-body-weight: 400;
  --type-body-letter-spacing: 0;
  --type-body-sm-size: 0.875rem;
  --type-body-sm-line-height: 1.375rem;
  --type-body-sm-weight: 400;
  --type-body-sm-letter-spacing: 0;
  --type-caption-size: 0.75rem;
  --type-caption-line-height: 1.125rem;
  --type-caption-weight: 400;
  --type-caption-letter-spacing: 0;

  /* Radius (canvas.json: button/input 16, card 20, blog pill 12, tag 19) */
  --radius-sm: 12px;
  --radius-control: 16px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-tag: 19px;

  /* Spacing (4pt + 8px scale) */
  --space-0_5: 4px;
  --space-1: 8px;
  --space-1_5: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-4_5: 40px;
  --space-5: 48px;
  --space-6: 64px;

  /* Layout */
  --bp-desktop: 1440px;
  --bp-mobile: 393px;
  --container-max: 1280px;

  /* SVG-verified control sizes (Contact 49-1545 + shared Newsletter) */
  --spec-control-h: 48px;
  --spec-control-h-sm: 40px;
  --spec-btn-cta-w: 166px;
  --spec-btn-subscribe-w: 135px;
  --spec-btn-contact-w: 171px;
  --spec-input-newsletter-w: 409px;
  --spec-textarea-h: 153px;
  --spec-newsletter-w: 1240px;
  --spec-newsletter-h: 122px;
  --spec-contact-form-w: 710px;
  --spec-contact-form-h: 595px;
  --spec-contact-form-pad: 34px;
  --spec-field-gap: 44px;
  --spec-name-col-gap: 16px;
  --spec-label-input-gap: 10px;
  --spec-tag-h: 30px;
  --spec-form-gap-input-btn: 14px;

  /* Golden ratio — φ ≈ 1.618; sm = 1/φ² ≈ 38.197%, lg = 1/φ ≈ 61.803% */
  --ratio-golden: 1.618034;
  --ratio-golden-sm: 38.197%;
  --ratio-golden-lg: 61.803%;
  --ratio-golden-unit: 0.381966;

  /* Auth pages — left column (sm) + right media (lg); position scales with viewport */
  --spec-auth-form-w: 422px;
  --spec-auth-media-split: var(--ratio-golden-sm);
  --spec-auth-pad-x: max(20px, calc((100vw * var(--ratio-golden-unit) - var(--spec-auth-form-w)) / 2.618034));
  --spec-auth-content-shift: 10%;
  /* Login anchor: form top 133px = offset + header 64px + gap 31px */
  --spec-auth-content-offset: 38px;
  --spec-auth-column-w: calc(var(--spec-auth-pad-x) + var(--spec-auth-content-shift) + var(--spec-auth-form-w));
  --spec-auth-media-solid-end: calc(var(--spec-auth-media-split) - 7.197%);
  --spec-auth-media-fade-mid: calc(var(--spec-auth-media-split) + 3.125%);
  --spec-auth-media-fade-soft: calc(var(--spec-auth-media-split) + 11.125%);
  --spec-auth-media-fade-out: calc(var(--spec-auth-media-split) + 19.125%);
  --spec-auth-header-h: 64px;
  --spec-auth-title-offset: 155px;
  --spec-auth-title-gap: 31px;
  --spec-auth-label-gap: 8px;
  --spec-auth-field-gap: 24px;
  --spec-auth-field-gap-compact: 10px;
  --spec-auth-label-gap-compact: 4px;
  --spec-auth-btn-gap: 21px;
  --spec-auth-signup-gap: 34px;
  --spec-auth-google-gap: 21px;

  /* Auth mobile — Login SVG 139-23779 (393×852) */
  --spec-auth-m-pad-x: 20px;
  --spec-auth-m-form-w: 353px;
  --spec-auth-m-status-h: 44px;
  --spec-auth-m-header-h: 74px;
  --spec-auth-m-title-offset: 46px;
  --spec-auth-m-title-gap: 14px;
  --spec-auth-m-title-size: 2.75rem;
  --spec-auth-m-title-lh: 3.375rem;
  --spec-auth-m-title-size-register: 2.125rem;
  --spec-auth-m-title-lh-register: 2.75rem;
  --spec-auth-m-title-to-form: 68px;
  --spec-auth-m-title-to-form-compact: 31px;
  --spec-auth-m-label-size: 1.25rem;
  --spec-auth-m-control-h: 54px;

  /* Gradients (Login SVG + svg-parse-tokens) */
  --gradient-gold: linear-gradient(180deg, #E68900 0%, #B36A00 100%);

  /* Effects */
  --glow-amber: 0 0 80px rgba(255, 158, 15, 0.35);
  --glow-amber-lg: 0 0 154px rgba(255, 158, 15, 0.35);
  --blur-glass: blur(25px);
  --shadow-input-focus: 0 0 0 2px var(--brand-glow);
  --stroke-input: 1px solid var(--border-input);
}