/* Generated from raw Figma variables by scripts/build_tokens.py.
 * Variable names are exact Figma WEB codeSyntax; aliases remain live.
 * px preserves Figma canvas units, including Manual. See README before print use.
 * Primitive tokens define semantic mappings; components should use semantic colors. */

/* Primitives / Value */
:root {
  --yf-color-orange-50: #FFF4EA;
  --yf-color-orange-100: #FFE2C7;
  --yf-color-orange-200: #FFC494;
  --yf-color-orange-300: #FFA45F;
  --yf-color-orange-400: #FF8A35;
  --yf-color-orange-500: #F97316;
  --yf-color-orange-600: #D95A0B;
  --yf-color-orange-700: #B5430B;
  --yf-color-orange-800: #913510;
  --yf-color-orange-900: #762F10;
  --yf-color-orange-950: #401506;
  --yf-color-ocean-50: #EDF8FA;
  --yf-color-ocean-100: #D7EFF3;
  --yf-color-ocean-200: #AFE0E8;
  --yf-color-ocean-300: #78C6D3;
  --yf-color-ocean-400: #3FA7B9;
  --yf-color-ocean-500: #1E879C;
  --yf-color-ocean-600: #176B7D;
  --yf-color-ocean-700: #175666;
  --yf-color-ocean-800: #184754;
  --yf-color-ocean-900: #183B46;
  --yf-color-ocean-950: #0A222A;
  --yf-color-neutral-0: #FFFFFF;
  --yf-color-neutral-50: #F7F8F8;
  --yf-color-neutral-100: #ECEEEF;
  --yf-color-neutral-200: #D8DCDE;
  --yf-color-neutral-300: #BCC2C5;
  --yf-color-neutral-400: #929B9F;
  --yf-color-neutral-500: #697377;
  --yf-color-neutral-600: #4D575B;
  --yf-color-neutral-700: #374044;
  --yf-color-neutral-800: #242A2D;
  --yf-color-neutral-900: #171C1E;
  --yf-color-neutral-950: #0D1113;
  --yf-color-neutral-1000: #000000;
  --yf-color-status-success-100: #EAF7EF;
  --yf-color-status-success-500: #2F8F5B;
  --yf-color-status-success-700: #206842;
  --yf-color-status-warning-100: #FFF3D6;
  --yf-color-status-warning-500: #D88700;
  --yf-color-status-warning-700: #9A5E00;
  --yf-color-status-error-100: #FDEBEC;
  --yf-color-status-error-500: #D64545;
  --yf-color-status-error-700: #A32E2E;
  --yf-color-status-info-100: #E8F3F8;
  --yf-color-status-info-500: #287EA0;
  --yf-color-status-info-700: #1E5E78;
  --yf-color-overlay-black-05: rgb(0 0 0 / 0.05098039284348488);
  --yf-color-overlay-black-10: rgb(0 0 0 / 0.10196078568696976);
  --yf-color-overlay-black-20: rgb(0 0 0 / 0.20000000298023224);
  --yf-color-overlay-black-40: rgb(0 0 0 / 0.4000000059604645);
  --yf-color-overlay-white-08: rgb(255 255 255 / 0.0784313753247261);
  --yf-color-overlay-white-16: rgb(255 255 255 / 0.16078431904315948);
  --yf-color-overlay-white-24: rgb(255 255 255 / 0.239215686917305);
  --yf-color-overlay-white-40: rgb(255 255 255 / 0.4000000059604645);
}

/* Semantic Color / Light */
:root, [data-yf-color-mode="light"] {
  --yf-color-bg-canvas: var(--yf-color-neutral-0);
  --yf-color-bg-surface: var(--yf-color-neutral-0);
  --yf-color-bg-surface-raised: var(--yf-color-neutral-0);
  --yf-color-bg-subtle: var(--yf-color-neutral-50);
  --yf-color-bg-inverse: var(--yf-color-neutral-950);
  --yf-color-bg-brand-subtle: var(--yf-color-orange-50);
  --yf-color-bg-brand-strong: var(--yf-color-orange-500);
  --yf-color-bg-overlay: var(--yf-color-overlay-black-40);
  --yf-color-text-primary: var(--yf-color-neutral-950);
  --yf-color-text-secondary: var(--yf-color-neutral-600);
  --yf-color-text-tertiary: var(--yf-color-neutral-500);
  --yf-color-text-disabled: var(--yf-color-neutral-400);
  --yf-color-text-inverse: var(--yf-color-neutral-0);
  --yf-color-text-brand: var(--yf-color-orange-700);
  --yf-color-text-link: var(--yf-color-ocean-700);
  --yf-color-text-on-brand: var(--yf-color-neutral-1000);
  --yf-color-icon-primary: var(--yf-color-neutral-950);
  --yf-color-icon-secondary: var(--yf-color-neutral-600);
  --yf-color-icon-disabled: var(--yf-color-neutral-400);
  --yf-color-icon-inverse: var(--yf-color-neutral-0);
  --yf-color-icon-brand: var(--yf-color-orange-600);
  --yf-color-border-subtle: var(--yf-color-neutral-100);
  --yf-color-border-default: var(--yf-color-neutral-200);
  --yf-color-border-strong: var(--yf-color-neutral-400);
  --yf-color-border-brand: var(--yf-color-orange-500);
  --yf-color-border-focus: var(--yf-color-ocean-500);
  --yf-color-action-primary-default: var(--yf-color-orange-500);
  --yf-color-action-primary-hover: var(--yf-color-orange-600);
  --yf-color-action-primary-pressed: var(--yf-color-orange-700);
  --yf-color-action-primary-disabled: var(--yf-color-neutral-200);
  --yf-color-action-primary-on-primary: var(--yf-color-neutral-1000);
  --yf-color-action-secondary-default: var(--yf-color-neutral-950);
  --yf-color-action-secondary-hover: var(--yf-color-neutral-800);
  --yf-color-action-secondary-pressed: var(--yf-color-neutral-1000);
  --yf-color-action-secondary-disabled: var(--yf-color-neutral-200);
  --yf-color-action-secondary-on-secondary: var(--yf-color-neutral-0);
  --yf-color-status-success-bg: var(--yf-color-status-success-100);
  --yf-color-status-success-text: var(--yf-color-status-success-700);
  --yf-color-status-success-icon: var(--yf-color-status-success-500);
  --yf-color-status-warning-bg: var(--yf-color-status-warning-100);
  --yf-color-status-warning-text: var(--yf-color-status-warning-700);
  --yf-color-status-warning-icon: var(--yf-color-status-warning-500);
  --yf-color-status-error-bg: var(--yf-color-status-error-100);
  --yf-color-status-error-text: var(--yf-color-status-error-700);
  --yf-color-status-error-icon: var(--yf-color-status-error-500);
  --yf-color-status-info-bg: var(--yf-color-status-info-100);
  --yf-color-status-info-text: var(--yf-color-status-info-700);
  --yf-color-status-info-icon: var(--yf-color-status-info-500);
  --yf-color-focus-ring: var(--yf-color-ocean-500);
  --yf-color-selection-bg: var(--yf-color-orange-100);
}

/* Semantic Color / Dark */
[data-yf-color-mode="dark"] {
  --yf-color-bg-canvas: var(--yf-color-neutral-1000);
  --yf-color-bg-surface: var(--yf-color-neutral-950);
  --yf-color-bg-surface-raised: var(--yf-color-neutral-900);
  --yf-color-bg-subtle: var(--yf-color-neutral-900);
  --yf-color-bg-inverse: var(--yf-color-neutral-0);
  --yf-color-bg-brand-subtle: var(--yf-color-orange-950);
  --yf-color-bg-brand-strong: var(--yf-color-orange-400);
  --yf-color-bg-overlay: var(--yf-color-overlay-black-40);
  --yf-color-text-primary: var(--yf-color-neutral-50);
  --yf-color-text-secondary: var(--yf-color-neutral-300);
  --yf-color-text-tertiary: var(--yf-color-neutral-400);
  --yf-color-text-disabled: var(--yf-color-neutral-600);
  --yf-color-text-inverse: var(--yf-color-neutral-950);
  --yf-color-text-brand: var(--yf-color-orange-300);
  --yf-color-text-link: var(--yf-color-ocean-300);
  --yf-color-text-on-brand: var(--yf-color-neutral-1000);
  --yf-color-icon-primary: var(--yf-color-neutral-50);
  --yf-color-icon-secondary: var(--yf-color-neutral-300);
  --yf-color-icon-disabled: var(--yf-color-neutral-600);
  --yf-color-icon-inverse: var(--yf-color-neutral-950);
  --yf-color-icon-brand: var(--yf-color-orange-300);
  --yf-color-border-subtle: var(--yf-color-neutral-900);
  --yf-color-border-default: var(--yf-color-neutral-700);
  --yf-color-border-strong: var(--yf-color-neutral-500);
  --yf-color-border-brand: var(--yf-color-orange-400);
  --yf-color-border-focus: var(--yf-color-ocean-300);
  --yf-color-action-primary-default: var(--yf-color-orange-400);
  --yf-color-action-primary-hover: var(--yf-color-orange-300);
  --yf-color-action-primary-pressed: var(--yf-color-orange-500);
  --yf-color-action-primary-disabled: var(--yf-color-neutral-800);
  --yf-color-action-primary-on-primary: var(--yf-color-neutral-1000);
  --yf-color-action-secondary-default: var(--yf-color-neutral-100);
  --yf-color-action-secondary-hover: var(--yf-color-neutral-200);
  --yf-color-action-secondary-pressed: var(--yf-color-neutral-0);
  --yf-color-action-secondary-disabled: var(--yf-color-neutral-800);
  --yf-color-action-secondary-on-secondary: var(--yf-color-neutral-950);
  --yf-color-status-success-bg: var(--yf-color-status-success-700);
  --yf-color-status-success-text: var(--yf-color-status-success-100);
  --yf-color-status-success-icon: var(--yf-color-status-success-500);
  --yf-color-status-warning-bg: var(--yf-color-status-warning-700);
  --yf-color-status-warning-text: var(--yf-color-status-warning-100);
  --yf-color-status-warning-icon: var(--yf-color-status-warning-500);
  --yf-color-status-error-bg: var(--yf-color-status-error-700);
  --yf-color-status-error-text: var(--yf-color-status-error-100);
  --yf-color-status-error-icon: var(--yf-color-status-error-500);
  --yf-color-status-info-bg: var(--yf-color-status-info-700);
  --yf-color-status-info-text: var(--yf-color-status-info-100);
  --yf-color-status-info-icon: var(--yf-color-status-info-500);
  --yf-color-focus-ring: var(--yf-color-ocean-300);
  --yf-color-selection-bg: var(--yf-color-orange-900);
}

/* Dimensions / Value */
:root {
  --yf-spacing-none: 0px;
  --yf-spacing-2xs: 2px;
  --yf-spacing-xs: 4px;
  --yf-spacing-sm: 8px;
  --yf-spacing-md: 12px;
  --yf-spacing-lg: 16px;
  --yf-spacing-xl: 20px;
  --yf-spacing-2xl: 24px;
  --yf-spacing-3xl: 32px;
  --yf-spacing-4xl: 40px;
  --yf-spacing-5xl: 48px;
  --yf-spacing-6xl: 64px;
  --yf-spacing-7xl: 80px;
  --yf-spacing-8xl: 96px;
  --yf-spacing-9xl: 120px;
  --yf-radius-none: 0px;
  --yf-radius-xs: 2px;
  --yf-radius-sm: 4px;
  --yf-radius-md: 6px;
  --yf-radius-lg: 8px;
  --yf-radius-xl: 12px;
  --yf-radius-2xl: 16px;
  --yf-radius-3xl: 24px;
  --yf-radius-full: 9999px;
  --yf-size-icon-sm: 16px;
  --yf-size-icon-md: 20px;
  --yf-size-icon-lg: 24px;
  --yf-size-icon-xl: 32px;
  --yf-size-control-compact: 32px;
  --yf-size-control-regular: 40px;
  --yf-size-control-large: 48px;
  --yf-border-width-default: 1px;
  --yf-border-width-strong: 2px;
  --yf-border-width-focus: 3px;
  --yf-opacity-disabled: 0.4000000059604645;
  --yf-opacity-muted: 0.6399999856948853;
  --yf-opacity-overlay: 0.7200000286102295;
}

/* Typography / Value */
:root {
  --yf-font-family-display: "Barlow";
  --yf-font-family-body: "Noto Sans SC";
  --yf-font-family-global: "Noto Sans";
  --yf-font-size-2xs: 11px;
  --yf-font-size-xs: 12px;
  --yf-font-size-sm: 14px;
  --yf-font-size-md: 16px;
  --yf-font-size-lg: 18px;
  --yf-font-size-xl: 20px;
  --yf-font-size-2xl: 24px;
  --yf-font-size-3xl: 32px;
  --yf-font-size-4xl: 40px;
  --yf-font-size-5xl: 48px;
  --yf-font-size-6xl: 64px;
  --yf-font-size-7xl: 80px;
  --yf-line-height-16: 16px;
  --yf-line-height-20: 20px;
  --yf-line-height-24: 24px;
  --yf-line-height-28: 28px;
  --yf-line-height-32: 32px;
  --yf-line-height-40: 40px;
  --yf-line-height-48: 48px;
  --yf-line-height-56: 56px;
  --yf-line-height-72: 72px;
  --yf-line-height-88: 88px;
  --yf-letter-spacing-tight: -0.5px;
  --yf-letter-spacing-normal: 0px;
  --yf-letter-spacing-wide: 0.5px;
  --yf-font-weight-regular: 400;
  --yf-font-weight-medium: 500;
  --yf-font-weight-semibold: 600;
  --yf-font-weight-bold: 700;
  --yf-font-family-traditional-chinese: "Noto Sans TC";
}

/* Motion / Value */
:root {
  --yf-motion-duration-instant: 0ms;
  --yf-motion-duration-fast: 120ms;
  --yf-motion-duration-base: 180ms;
  --yf-motion-duration-moderate: 240ms;
  --yf-motion-duration-slow: 360ms;
  --yf-motion-duration-slower: 520ms;
  --yf-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --yf-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --yf-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --yf-motion-easing-mechanical: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Manual / Value */
:root {
  --yf-manual-page-width: 595px;
  --yf-manual-page-height: 842px;
  --yf-manual-page-margin: 42px;
  --yf-manual-page-cover-margin: 48px;
  --yf-manual-page-header-height: 50px;
  --yf-manual-page-footer-baseline: 24px;
  --yf-manual-layout-content-width: 511px;
  --yf-manual-layout-column-gap: 18px;
  --yf-manual-font-size-subheading: 10.5px;
  --yf-manual-line-height-subheading: 16px;
  --yf-manual-font-size-body-default: 9.5px;
  --yf-manual-line-height-body-default: 15px;
  --yf-manual-font-size-body-small: 8.5px;
  --yf-manual-line-height-body-small: 13px;
  --yf-manual-font-size-body-compact: 8px;
  --yf-manual-line-height-body-compact: 12px;
}

/* Compact Pixel / Value */
:root {
  --yf-font-family-pixel: "Fusion Pixel 12px Prop zh_hans";
  --yf-compact-control-height: 36px;
  --yf-compact-status-height: 20px;
  --yf-compact-nav-item-height: 38px;
  --yf-compact-status-padding-x: 5px;
  --yf-compact-panel-padding-x: 20px;
  --yf-compact-panel-padding-y: 18px;
  --yf-compact-radius-surface: 0px;
  --yf-compact-radius-control: 0px;
  --yf-compact-radius-status: 4px;
  --yf-compact-title-xl-size: 24px;
  --yf-compact-title-xl-line-height: 32px;
  --yf-compact-title-l-size: 18px;
  --yf-compact-title-l-line-height: 24px;
  --yf-compact-body-size: 14px;
  --yf-compact-body-line-height: 20px;
  --yf-compact-detail-size: 13px;
  --yf-compact-detail-line-height: 18px;
  --yf-compact-label-size: 12px;
  --yf-compact-label-line-height: 16px;
  --yf-compact-status-size: 12px;
  --yf-compact-status-line-height: 18px;
}