@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@700&family=JetBrains+Mono:wght@400;500&display=swap";/**
* @fileoverview linko.shop design system — tech-fresh dark aesthetic.
*
* This stylesheet defines design tokens (colors, typography, spacing, motion)
* and base component classes consumable by any framework or static HTML.
*
* @module linko-shop/design-system
* @author linko.shop
* @license MIT (recommended; adjust to your project license)
*
* @example HTML setup
* ```html
*
*
*
* ```
*/:root{--color-bg-main: #0a0e1a;--color-bg-card: #0f172a;--color-border: #1e3a5f;--color-bg-elevated: #152238;--color-bg-overlay: rgb(10 14 26 / 72%);--color-text-primary: #f1f5f9;--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--color-text-disabled: #475569;--color-text-on-brand: #ffffff;--color-brand: #3b82f6;--color-brand-strong: #2563eb;--color-brand-muted: rgb(59 130 246 / 16%);--color-accent: #22d3ee;--color-accent-strong: #06b6d4;--color-accent-muted: rgb(34 211 238 / 14%);--color-success: #34d399;--color-warning: #fbbf24;--color-danger: #f87171;--color-danger-strong: #ef4444;--color-danger-muted: rgb(248 113 113 / 14%);--font-heading: "DM Sans", "Noto Serif TC", "PingFang TC", sans-serif;--font-body: "Inter", "Noto Sans TC", "PingFang HK", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;--text-12: .75rem;--text-14: .875rem;--text-16: 1rem;--text-20: 1.25rem;--text-28: 1.75rem;--text-40: 2.5rem;--text-56: 3.5rem;--leading-tight: 1.15;--leading-snug: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--line-height-chinese: 1.8;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--tracking-tight: -.02em;--tracking-normal: 0;--tracking-wide: .04em;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgb(0 0 0 / 35%);--shadow-md: 0 8px 24px rgb(0 0 0 / 45%);--shadow-glow-brand: 0 0 0 1px rgb(59 130 246 / 35%), 0 0 32px rgb(59 130 246 / 18%);--shadow-glow-accent: 0 0 0 1px rgb(34 211 238 / 30%), 0 0 28px rgb(34 211 238 / 12%);--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--duration-fast: .15s;--duration-base: .3s;--duration-slow: .45s;--focus-ring: 0 0 0 2px var(--color-bg-main), 0 0 0 4px var(--color-brand);--focus-ring-offset: 2px}*,*:before,*:after{box-sizing:border-box}html{font-size:100%;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;font-family:var(--font-body);font-size:var(--text-16);line-height:var(--line-height-chinese);font-weight:var(--weight-regular);color:var(--color-text-primary);background-color:var(--color-bg-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ds-h1,.ds-h2,.ds-h3,.ds-h4{font-family:var(--font-heading);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text-primary);margin:0 0 var(--space-4)}.ds-h1{font-size:var(--text-56);line-height:var(--leading-tight)}.ds-h2{font-size:var(--text-40);line-height:var(--leading-snug)}.ds-h3{font-size:var(--text-28);line-height:var(--leading-snug)}.ds-h4{font-size:var(--text-20);line-height:var(--leading-snug)}.ds-body-lg{font-size:var(--text-20);line-height:var(--line-height-chinese)}.ds-body{font-size:var(--text-16);line-height:var(--line-height-chinese)}.ds-body-sm{font-size:var(--text-14);line-height:var(--line-height-chinese)}.ds-caption{font-size:var(--text-12);line-height:var(--line-height-chinese);color:var(--color-text-secondary);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ds-price{font-family:var(--font-mono);font-size:var(--text-20);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);color:var(--color-text-primary)}.ds-price-sm{font-family:var(--font-mono);font-size:var(--text-14);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums;color:var(--color-accent)}.ds-link{color:var(--color-brand);text-decoration:underline;text-underline-offset:.2em;transition:color var(--duration-fast) var(--ease-default)}.ds-link:hover{color:var(--color-accent)}.ds-btn{--btn-bg: transparent;--btn-fg: var(--color-text-primary);--btn-border: transparent;--btn-shadow: none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:calc(var(--space-10) + var(--space-1));padding:var(--space-2) var(--space-5);font-family:var(--font-body);font-size:var(--text-14);font-weight:var(--weight-semibold);line-height:1;letter-spacing:var(--tracking-normal);color:var(--btn-fg);background-color:var(--btn-bg);border:1px solid var(--btn-border);border-radius:var(--radius-md);box-shadow:var(--btn-shadow);cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--duration-fast) var(--ease-default),color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.ds-btn:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--btn-shadow)}.ds-btn:active:not(:disabled){transform:translateY(1px)}.ds-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ds-btn--primary{--btn-bg: var(--color-brand);--btn-fg: var(--color-text-on-brand);--btn-border: transparent;--btn-shadow: var(--shadow-sm)}.ds-btn--primary:hover:not(:disabled){--btn-bg: var(--color-brand-strong);--btn-shadow: var(--shadow-glow-brand)}.ds-btn--secondary{--btn-bg: var(--color-bg-card);--btn-fg: var(--color-text-primary);--btn-border: var(--color-border)}.ds-btn--secondary:hover:not(:disabled){--btn-bg: var(--color-bg-elevated);--btn-border: var(--color-brand);--btn-shadow: var(--shadow-glow-brand)}.ds-btn--ghost{--btn-bg: transparent;--btn-fg: var(--color-text-secondary);--btn-border: transparent}.ds-btn--ghost:hover:not(:disabled){--btn-bg: var(--color-brand-muted);--btn-fg: var(--color-text-primary)}.ds-btn--danger{--btn-bg: var(--color-danger-strong);--btn-fg: var(--color-text-on-brand);--btn-border: transparent}.ds-btn--danger:hover:not(:disabled){--btn-bg: #dc2626;box-shadow:0 0 0 1px #f8717166,0 0 24px #ef444438}.ds-card{background-color:var(--color-bg-card);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default)}.ds-card--interactive{cursor:pointer}.ds-card--interactive:hover{border-color:#3b82f673;box-shadow:var(--shadow-md),var(--shadow-glow-brand)}.ds-card__title{font-family:var(--font-heading);font-size:var(--text-20);font-weight:var(--weight-semibold);margin:0 0 var(--space-2)}.ds-card__meta{font-size:var(--text-12);color:var(--color-text-muted);margin:0}.ds-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);font-family:var(--font-body);font-size:var(--text-12);font-weight:var(--weight-semibold);line-height:1;letter-spacing:var(--tracking-wide);text-transform:uppercase;border-radius:var(--radius-full);border:1px solid transparent}.ds-badge--neutral{background-color:var(--color-bg-elevated);color:var(--color-text-secondary);border-color:var(--color-border)}.ds-badge--brand{background-color:var(--color-brand-muted);color:var(--color-brand);border-color:#3b82f659}.ds-badge--accent{background-color:var(--color-accent-muted);color:var(--color-accent);border-color:#22d3ee59}.ds-badge--danger{background-color:var(--color-danger-muted);color:var(--color-danger);border-color:#f8717159}.ds-input{display:block;width:100%;min-height:calc(var(--space-10) + var(--space-1));padding:var(--space-2) var(--space-3);font-family:var(--font-body);font-size:var(--text-14);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-main);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default),background-color var(--duration-fast) var(--ease-default)}.ds-input::placeholder{color:var(--color-text-muted)}.ds-input:hover:not(:disabled):not(:focus-visible){border-color:#3b82f673}.ds-input:focus-visible{border-color:var(--color-brand);box-shadow:var(--focus-ring)}.ds-input:disabled{opacity:.5;cursor:not-allowed}.ds-input--error{border-color:var(--color-danger-strong)}.ds-input--error:focus-visible{box-shadow:0 0 0 2px var(--color-bg-main),0 0 0 4px var(--color-danger-muted)}.ds-select{display:block;width:100%;min-height:calc(var(--space-10) + var(--space-1));padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);font-family:var(--font-body);font-size:var(--text-14);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-main);border:1px solid var(--color-border);border-radius:var(--radius-md);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-accent) 50%),linear-gradient(135deg,var(--color-accent) 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;transition:border-color var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}.ds-select:hover:not(:disabled):not(:focus-visible){border-color:#3b82f673}.ds-select:focus-visible{border-color:var(--color-brand);box-shadow:var(--focus-ring)}.ds-select:disabled{opacity:.5;cursor:not-allowed}.ds-stack{display:flex;flex-direction:column;gap:var(--space-4)}.ds-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-3);align-items:center}.ds-page{padding:var(--space-8) var(--space-4);max-width:72rem;margin-inline:auto}.header-wrapper,.header__wrapper,.header{background:#0a0e1aeb!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important}.header__menu-item:hover,.header__menu-item--top:hover{color:#3b82f6!important}.header__search input:focus,.search__input:focus,.search__input--header:focus{border-color:#3b82f6!important;box-shadow:0 0 0 2px #3b82f633!important}.lh .lh-btn.dark,.lh a[href*=charger]{background:#3b82f6!important;border:none!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}.lh .lh-btn.dark:hover,.lh a[href*=charger]:hover{background:#2563eb!important;transform:translateY(-2px)!important;box-shadow:0 8px 24px #3b82f64d!important}.lh-hero h1{animation:heroFadeIn .8s cubic-bezier(.4,0,.2,1) forwards!important}@keyframes heroFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.lh-hero h1{animation:none!important;opacity:1!important;transform:none!important}}.lh{position:relative;isolation:isolate}.lh:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 85% 15%,rgba(59,130,246,.1),transparent 55%)}.lh .lh-float{background:#0f172abf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(59,130,246,.2);border-radius:12px;box-shadow:0 8px 32px #0000004d}.lh .lh-float b{color:#f1f5f9}.lh .lh-float small{color:#94a3b8}
/*# sourceMappingURL=/cdn/shop/t/38/assets/design-system.css.map */