/* 2FA Tool ยท design tokens (Apple-native, liquid glass) */ :root { --tt-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif; --tt-font-digits: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Roboto, system-ui, sans-serif; --tt-font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace; --tt-r-xs: 8px; --tt-r-sm: 12px; --tt-r-md: 16px; --tt-r-lg: 22px; --tt-r-xl: 28px; --tt-r-2xl: 34px; --tt-r-pill: 999px; --tt-ease: cubic-bezier(.22, .8, .24, 1); --tt-ease-out: cubic-bezier(.16, 1, .3, 1); --tt-ease-spring: cubic-bezier(.34, 1.4, .64, 1); --tt-ease-sheet: cubic-bezier(.32, .72, 0, 1); --tt-dur-1: 140ms; --tt-dur-2: 240ms; --tt-dur-3: 380ms; --tt-dur-4: 520ms; --tt-safe-t: env(safe-area-inset-top, 0px); --tt-safe-b: env(safe-area-inset-bottom, 0px); --tt-safe-l: env(safe-area-inset-left, 0px); --tt-safe-r: env(safe-area-inset-right, 0px); --tt-topbar-h: 56px; --tt-nav-h: 44px; --tt-tabbar-h: 64px; --tt-blur: 24px; --tt-blur-strong: 34px; } :root:lang(zh-TW), :root:lang(zh-HK) { --tt-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", system-ui, sans-serif; } :root:lang(ja) { --tt-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif; } :root, :root[data-theme="light"] { color-scheme: light; --tt-blue: #007aff; --tt-green: #34c759; --tt-indigo: #5856d6; --tt-orange: #ff9500; --tt-red: #ff3b30; --tt-teal: #30b0c7; --tt-purple: #af52de; --tt-pink: #ff2d55; --tt-yellow: #ffcc00; --tt-gray: #8e8e93; --tt-accent: var(--tt-blue); --tt-accent-hover: #0a6fe6; --tt-accent-ink: #fff; --tt-accent-soft: rgba(0, 122, 255, .11); --tt-accent-soft-2: rgba(0, 122, 255, .18); --tt-focus: rgba(0, 122, 255, .28); --tt-bg: #f2f2f7; --tt-bg-2: #e9e9f0; --tt-surface: rgba(255, 255, 255, .78); --tt-surface-solid: #fff; --tt-surface-raised: rgba(255, 255, 255, .92); --tt-label: #1d1d1f; --tt-label-2: rgba(60, 60, 67, .66); --tt-label-3: rgba(60, 60, 67, .38); --tt-label-4: rgba(60, 60, 67, .2); --tt-sep: rgba(60, 60, 67, .13); --tt-sep-strong: rgba(60, 60, 67, .2); --tt-fill: rgba(120, 120, 128, .12); --tt-fill-2: rgba(120, 120, 128, .08); --tt-fill-3: rgba(120, 120, 128, .2); --tt-input: rgba(255, 255, 255, .72); --tt-input-border: rgba(60, 60, 67, .12); --tt-glass: rgba(255, 255, 255, .6); --tt-glass-2: rgba(255, 255, 255, .74); --tt-glass-bar: rgba(250, 250, 252, .72); --tt-glass-sheet: rgba(248, 248, 251, .86); --tt-glass-border: rgba(255, 255, 255, .78); --tt-glass-edge: rgba(0, 0, 0, .055); --tt-glass-hi: rgba(255, 255, 255, .95); --tt-glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 38%, rgba(255, 255, 255, 0) 62%); --tt-lens: rgba(120, 120, 128, .15); --tt-shadow-1: 0 1px 2px rgba(15, 20, 40, .04), 0 2px 8px rgba(15, 20, 40, .04); --tt-shadow-2: 0 2px 6px rgba(15, 20, 40, .04), 0 14px 36px rgba(15, 20, 40, .08); --tt-shadow-3: 0 10px 30px rgba(15, 20, 40, .1), 0 32px 90px rgba(15, 20, 40, .16); --tt-shadow-btn: 0 1px 2px rgba(0, 60, 160, .18), 0 6px 18px rgba(0, 110, 255, .24); --tt-mesh-1: rgba(110, 165, 255, .62); --tt-mesh-2: rgba(198, 160, 255, .52); --tt-mesh-3: rgba(104, 220, 200, .4); --tt-noise-opacity: .035; --tt-scrim: rgba(10, 12, 24, .28); --tt-themecolor: #f2f2f7; --tt-wall-veil: #f2f2f7; --tt-wall-shadow: 0 1px 14px rgba(255, 255, 255, .72), 0 0 2px rgba(255, 255, 255, .6); } :root[data-theme="dark"] { color-scheme: dark; --tt-blue: #0a84ff; --tt-green: #30d158; --tt-indigo: #5e5ce6; --tt-orange: #ff9f0a; --tt-red: #ff453a; --tt-teal: #40c8e0; --tt-purple: #bf5af2; --tt-pink: #ff375f; --tt-yellow: #ffd60a; --tt-gray: #98989d; --tt-accent: var(--tt-blue); --tt-accent-hover: #3d9bff; --tt-accent-ink: #fff; --tt-accent-soft: rgba(10, 132, 255, .18); --tt-accent-soft-2: rgba(10, 132, 255, .28); --tt-focus: rgba(10, 132, 255, .42); --tt-bg: #000; --tt-bg-2: #0c0c10; --tt-surface: rgba(38, 38, 42, .72); --tt-surface-solid: #1c1c1e; --tt-surface-raised: rgba(44, 44, 48, .9); --tt-label: #f5f5f7; --tt-label-2: rgba(235, 235, 245, .62); --tt-label-3: rgba(235, 235, 245, .34); --tt-label-4: rgba(235, 235, 245, .18); --tt-sep: rgba(84, 84, 88, .46); --tt-sep-strong: rgba(84, 84, 88, .7); --tt-fill: rgba(118, 118, 128, .24); --tt-fill-2: rgba(118, 118, 128, .16); --tt-fill-3: rgba(118, 118, 128, .32); --tt-input: rgba(255, 255, 255, .06); --tt-input-border: rgba(255, 255, 255, .08); --tt-glass: rgba(30, 30, 34, .56); --tt-glass-2: rgba(40, 40, 44, .7); --tt-glass-bar: rgba(22, 22, 26, .66); --tt-glass-sheet: rgba(28, 28, 32, .86); --tt-glass-border: rgba(255, 255, 255, .09); --tt-glass-edge: rgba(0, 0, 0, .5); --tt-glass-hi: rgba(255, 255, 255, .14); --tt-glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .02) 40%, rgba(255, 255, 255, 0) 62%); --tt-lens: rgba(255, 255, 255, .12); --tt-shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .24); --tt-shadow-2: 0 2px 8px rgba(0, 0, 0, .32), 0 16px 40px rgba(0, 0, 0, .38); --tt-shadow-3: 0 12px 32px rgba(0, 0, 0, .42), 0 34px 100px rgba(0, 0, 0, .55); --tt-shadow-btn: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(10, 132, 255, .3); --tt-mesh-1: rgba(36, 92, 255, .36); --tt-mesh-2: rgba(132, 70, 255, .3); --tt-mesh-3: rgba(0, 168, 150, .2); --tt-noise-opacity: .05; --tt-scrim: rgba(0, 0, 0, .5); --tt-themecolor: #000000; --tt-wall-veil: #000; --tt-wall-shadow: 0 1px 14px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .5); }