/* AI x UIUX 工作坊 Landing Page tokens.css — 由 tokens.json 產生（design-loop scripts/tokens_build.py），不要手改 */
:root {

  /* ── ref ── */
  --lp-ref-orange-50: #FFF3EC;
  --lp-ref-orange-300: #FF7A33;
  --lp-ref-orange-500: #F74007;
  --lp-ref-orange-650: #E23600;
  --lp-ref-orange-700: #D93A00;
  --lp-ref-neutral-0: #FFFFFF;
  --lp-ref-neutral-50: #F7F7F5;
  --lp-ref-neutral-100: #F2F2F0;
  --lp-ref-neutral-200: #E6E6E2;
  --lp-ref-neutral-300: #BDBDB8;
  --lp-ref-neutral-500: #6B6B70;
  --lp-ref-neutral-600: #55555A;
  --lp-ref-neutral-700: #333336;
  --lp-ref-neutral-800: #141416;
  --lp-ref-neutral-850: #101012;
  --lp-ref-neutral-900: #0B0B0D;
  --lp-ref-white-a94: #FFFFFFF0;
  --lp-ref-white-a92: #FFFFFFEB;
  --lp-ref-white-a90: #FFFFFFE6;
  --lp-ref-white-a72: #FFFFFFB8;
  --lp-ref-white-a50: #FFFFFF80;
  --lp-ref-white-a18: #FFFFFF2E;
  --lp-ref-white-a10: #FFFFFF1A;
  --lp-ref-ink-a07: #14141612;
  --lp-ref-orange-200: #FFB689;
  --lp-ref-orange-350: #F76235;
  --lp-space-2: 2px;
  --lp-space-4: 4px;
  --lp-space-6: 6px;
  --lp-space-8: 8px;
  --lp-space-10: 10px;
  --lp-space-12: 12px;
  --lp-space-14: 14px;
  --lp-space-16: 16px;
  --lp-space-18: 18px;
  --lp-space-20: 20px;
  --lp-space-24: 24px;
  --lp-space-28: 28px;
  --lp-space-32: 32px;
  --lp-space-36: 36px;
  --lp-space-40: 40px;
  --lp-space-44: 44px;
  --lp-space-48: 48px;
  --lp-space-72: 72px;
  --lp-radius-sm: 6px;
  --lp-radius-inner: 8px;
  --lp-radius-card: 12px;
  --lp-radius-xs: 4px;
  --lp-radius-full: 100px;

  /* ── sys ── */
  --lp-surface-page: var(--lp-ref-neutral-100);
  --lp-surface-card: var(--lp-ref-neutral-0);
  --lp-surface-tile: var(--lp-ref-neutral-50);
  --lp-surface-tint: var(--lp-ref-orange-50);
  --lp-surface-panel: var(--lp-ref-neutral-850);
  --lp-surface-hero: var(--lp-ref-neutral-900);
  --lp-surface-foot: var(--lp-ref-neutral-900);
  --lp-surface-inverse: var(--lp-ref-neutral-800);
  --lp-surface-head: var(--lp-ref-white-a90);
  --lp-surface-mbar: var(--lp-ref-white-a94);
  --lp-surface-glass: var(--lp-ref-white-a10);
  --lp-text-primary: var(--lp-ref-neutral-800);
  --lp-text-body: var(--lp-ref-neutral-700);
  --lp-text-secondary: var(--lp-ref-neutral-600);
  --lp-text-tertiary: var(--lp-ref-neutral-500);
  --lp-text-accent: var(--lp-ref-orange-700);
  --lp-text-on-accent: var(--lp-ref-neutral-0);
  --lp-text-on-dark: var(--lp-ref-neutral-0);
  --lp-text-on-dark-body: var(--lp-ref-white-a92);
  --lp-text-on-dark-muted: var(--lp-ref-white-a72);
  --lp-border-default: var(--lp-ref-neutral-200);
  --lp-border-strong: var(--lp-ref-neutral-300);
  --lp-border-on-dark: var(--lp-ref-white-a10);
  --lp-border-glass: var(--lp-ref-white-a18);
  --lp-border-annotation: var(--lp-ref-white-a50);
  --lp-border-head: var(--lp-ref-ink-a07);
  --lp-accent-default: var(--lp-ref-orange-500);
  --lp-accent-hi: var(--lp-ref-orange-300);
  --lp-accent-lo: var(--lp-ref-orange-650);
  --lp-accent-btn-start: var(--lp-ref-orange-350);
  --lp-accent-btn-end: var(--lp-ref-orange-200);
  --lp-font-sans: "Stack Sans Text","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --lp-font-cjk: "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --lp-fw-regular: 400;
  --lp-fw-medium: 500;
  --lp-fw-semibold: 600;
  --lp-fw-bold: 700;
  --lp-fs-hero: 50px;
  --lp-lh-hero: 63px;
  --lp-fs-h2: 26px;
  --lp-lh-h2: 36px;
  --lp-fs-h3: 24px;
  --lp-lh-h3: 36px;
  --lp-fs-title-lg: 18px;
  --lp-lh-title-lg: 28px;
  --lp-fs-title-md: 17px;
  --lp-lh-title-md: 26px;
  --lp-fs-panel: 20px;
  --lp-lh-panel: 28px;
  --lp-fs-lead: 17px;
  --lp-lh-lead: 28px;
  --lp-fs-body: 16px;
  --lp-lh-body: 30px;
  --lp-fs-body-md: 16px;
  --lp-lh-body-md: 26px;
  --lp-fs-body-sm: 15px;
  --lp-lh-body-sm: 26px;
  --lp-fs-caption: 14px;
  --lp-lh-caption: 22px;
  --lp-fs-label: 14px;
  --lp-lh-label: 20px;
  --lp-fs-nav: 15px;
  --lp-lh-nav: 20px;
  --lp-fs-time: 15px;
  --lp-lh-time: 24px;
  --lp-fs-btn: 17px;
  --lp-lh-btn: 24px;
  --lp-fs-btn-sm: 16px;
  --lp-lh-btn-sm: 24px;
  --lp-fs-logo: 20px;
  --lp-lh-logo: 28px;
  --lp-fs-price-lg: 30px;
  --lp-lh-price-lg: 36px;
  --lp-fs-price-md: 22px;
  --lp-lh-price-md: 28px;
  --lp-fs-price-sm: 17px;
  --lp-lh-price-sm: 24px;
  --lp-layout-container: 1200px;
  --lp-layout-margin: 24px;
  --lp-layout-gutter: 24px;
  --lp-layout-gap: 16px;
  --lp-layout-pad: 36px;
  --lp-layout-head: 64px;
  --lp-layout-bar: 52px;
  --lp-layout-hero: 600px;
  --lp-gradient-btn: linear-gradient(90deg,var(--lp-accent-btn-start) 0%,var(--lp-accent-btn-end) 100%);
  --lp-gradient-bar: linear-gradient(180deg,var(--lp-accent-hi),var(--lp-accent-lo));
  --lp-gradient-glow: linear-gradient(90deg,var(--lp-accent-lo),var(--lp-accent-hi));
  --lp-gradient-tile: radial-gradient(120% 120% at 80% 0,#4A2315 0%,#1C1A1A 52%,var(--lp-text-primary) 100%);
  --lp-gradient-scrim-x: linear-gradient(90deg,rgba(11,11,13,.92) 0%,rgba(11,11,13,.82) 40%,rgba(11,11,13,0) 68%);
  --lp-gradient-scrim-y: linear-gradient(0deg,rgba(11,11,13,.35) 0%,rgba(11,11,13,0) 30%);
  --lp-gradient-scrim-m: linear-gradient(0deg,rgba(11,11,13,.94) 0%,rgba(11,11,13,.78) 34%,rgba(11,11,13,.08) 62%,rgba(11,11,13,0) 100%);
  --lp-gradient-fade-r: linear-gradient(90deg,rgba(255,255,255,0),#fff);
  --lp-gradient-spill: radial-gradient(52% 100% at 74% 0,rgba(247,64,7,.1),rgba(247,64,7,0) 72%);
  --lp-image-fluid: url(../assets/ui/fluid.webp);
  --lp-image-gradient: url(../assets/ui/gradient.webp);
  --lp-shadow-mbar: 0px 0px 0px 1px #1414160F, 0px 14px 34px -12px #14141666;
  --lp-shadow-head: 0px 1px 0px 0px #14141612;
  --lp-shadow-btn: inset 0px 1px 0px 0px #FFFFFF73, inset 0px -1px 0px 0px #781E0038, 0px 10px 24px -10px #F74007A6;
  --lp-shadow-btn-hover: inset 0px 1px 0px 0px #FFFFFF80, inset 0px -1px 0px 0px #781E0038, 0px 14px 30px -10px #F74007CC;
  --lp-shadow-tile: inset 0px 1px 0px 0px #FFFFFF24;
  --lp-shadow-glass: inset 0px 0px 0px 1px #FFFFFF2E;

  /* ── comp ── */
  --lp-c-aside: 366px;
  --lp-c-btn-h: 52px;
  --lp-c-btn-h-sm: 44px;
  --lp-c-btn-px: 28px;
  --lp-c-btn-px-sm: 20px;
  --lp-c-tile: 44px;
  --lp-c-faq-ico: 28px;
  --lp-c-avatar: 24px;
  --lp-c-photo: 72px;
  --lp-c-media-h: 112px;
  --lp-c-marker-w: 8px;
  --lp-c-marker-h: 2px;
  --lp-c-bar-w: 12px;
  --lp-c-bar-h: 12px;
  --lp-c-glow-h: 3px;
  --lp-c-node: 10px;
  --lp-c-rail: 22px;
  --lp-c-rail-w: 2px;
  --lp-c-time: 104px;
  --lp-c-meta-dt: 62px;
  --lp-c-stroke: 1px;
  --lp-c-frame: 6px;
  --lp-c-ico-sm: 16px;
  --lp-c-ico-md: 18px;
  --lp-c-ico-lg: 20px;
  --lp-c-ico-tile: 22px;
}

@media (max-width:1099px) {
  :root {
    --lp-fs-hero: 40px;
    --lp-lh-hero: 50px;
    --lp-fs-lead: 16px;
    --lp-lh-lead: 26px;
    --lp-layout-hero: 520px;
    --lp-gradient-scrim-x: linear-gradient(90deg,rgba(11,11,13,.94) 0%,rgba(11,11,13,.84) 40%,rgba(11,11,13,0) 70%);
  }
}

@media (max-width:640px) {
  :root {
    --lp-fs-hero: 30px;
    --lp-lh-hero: 38px;
    --lp-fs-h2: 22px;
    --lp-lh-h2: 30px;
    --lp-fs-h3: 20px;
    --lp-lh-h3: 30px;
    --lp-fs-lead: 16px;
    --lp-lh-lead: 26px;
    --lp-fs-label: 13px;
    --lp-lh-label: 18px;
    --lp-fs-logo: 18px;
    --lp-lh-logo: 24px;
    --lp-layout-margin: 16px;
    --lp-layout-pad: 24px;
    --lp-layout-head: 56px;
    --lp-layout-bar: 48px;
  }
}