/* * astryx-tokens.css — design token cho videodown.app * * Dựa trên Astryx Design System (@astryxdesign/theme-neutral, @astryxdesign/core) * Copyright (c) 2026 Meta Platforms, Inc. — MIT License * https://github.com/facebook/astryx * * Đây là một "theme" theo đúng token contract của Astryx: giữ nguyên tên token, * thay giá trị brand (cobalt/lime) — cùng cách Astryx làm các theme butter/chocolate/gothic. * Không kèm React/StyleX: chỉ lấy tầng token, giữ site ở dạng HTML tĩnh. * * Token gốc: 172 | spacing: 13 | brand override: 12 */ :root { color-scheme: light; /* ── spacing (từ @astryxdesign/core) ───────────────────────── */ --spacing-0: 0px; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px; --spacing-8: 32px; --spacing-9: 36px; --spacing-10: 40px; --spacing-11: 44px; --spacing-12: 48px; /* ── radius ────────────────────────────────────────────────── */ --radius-none: 0.25rem; --radius-inner: 0.375rem; --radius-element: 0.625rem; --radius-container: 0.75rem; --radius-page: 1.75rem; --radius-full: 9999px; /* ── typography ────────────────────────────────────────────── */ --font-size-4xs: 0.375rem; --font-size-3xs: 0.4375rem; --font-size-2xs: 0.5rem; --font-size-xs: 0.625rem; --font-size-sm: 0.75rem; --font-size-base: 0.875rem; --font-size-lg: 1.0625rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.8125rem; --font-size-4xl: 2.1875rem; --font-size-5xl: 2.625rem; --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-heading: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* mở rộng scale cho marketing hero (Astryx dừng ở 5xl/42px) */ --font-size-6xl: 3.25rem; --font-size-7xl: clamp(2.25rem, 5.5vw, 3.75rem); --font-weight-heading-display: 700; /* ── text roles ────────────────────────────────────────────── */ --text-heading-1-size: var(--font-size-2xl); --text-heading-1-weight: var(--font-weight-semibold); --text-heading-1-leading: 1.3333; --text-heading-2-size: var(--font-size-xl); --text-heading-2-weight: var(--font-weight-semibold); --text-heading-2-leading: 1.4; --text-heading-3-size: var(--font-size-lg); --text-heading-3-weight: var(--font-weight-bold); --text-heading-3-leading: 1.4118; --text-heading-4-size: var(--font-size-base); --text-heading-4-weight: var(--font-weight-bold); --text-heading-4-leading: 1.4286; --text-heading-5-size: var(--font-size-sm); --text-heading-5-weight: var(--font-weight-semibold); --text-heading-5-leading: 1.6667; --text-heading-6-size: var(--font-size-xs); --text-heading-6-weight: var(--font-weight-semibold); --text-heading-6-leading: 1.6; --text-body-size: var(--font-size-base); --text-body-weight: var(--font-weight-normal); --text-body-leading: 1.4286; --text-large-size: var(--font-size-lg); --text-large-weight: var(--font-weight-semibold); --text-large-leading: 1.4118; --text-label-size: var(--font-size-base); --text-label-weight: var(--font-weight-medium); --text-label-leading: 1.4286; --text-code-size: var(--font-size-base); --text-code-weight: var(--font-weight-normal); --text-code-leading: 1.4286; --text-supporting-size: var(--font-size-sm); --text-supporting-weight: var(--font-weight-normal); --text-supporting-leading: 1.6667; --text-display-1-size: var(--font-size-5xl); --text-display-1-weight: var(--font-weight-normal); --text-display-1-leading: 1.2381; --text-display-2-size: var(--font-size-4xl); --text-display-2-weight: var(--font-weight-normal); --text-display-2-leading: 1.2571; --text-display-3-size: var(--font-size-3xl); --text-display-3-weight: var(--font-weight-normal); --text-display-3-leading: 1.3793; /* ── motion ────────────────────────────────────────────────── */ --duration-fast-min: 95ms; --duration-fast: 125ms; --duration-fast-max: 165ms; --duration-medium-min: 225ms; --duration-medium: 300ms; --duration-medium-max: 400ms; --duration-slow-min: 525ms; --duration-slow: 700ms; --duration-slow-max: 935ms; /* ── elevation ─────────────────────────────────────────────── */ --shadow-low: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%)); --shadow-med: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%)); --shadow-high: 0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%)); /* ── brand: videodown (override theo token contract Astryx) ── */ --color-background-body: #FAFBFF; --color-background-card: #FFFFFF; --color-background-surface: #FFFFFF; --color-background-muted: #EEF1FA; --color-accent: #2B4CFF; --color-accent-strong: #1B2FA8; --color-accent-contrast: #C6F432; --color-on-accent: #101800; --color-text-primary: #0B1220; --color-text-secondary: #5B6478; --color-text-accent: #2B4CFF; --color-border: #E4E8F2; /* ── màu phụ trợ giữ từ theme gốc ──────────────────────────── */ --color-border-red: light-dark(#e6bab8, #ff6f6c); --color-icon-red: light-dark(#89001a, #ff9e97); --color-text-red: light-dark(#89001a, #ffc6c1); --color-border-orange: light-dark(#e6bda2, #e2883e); --color-icon-orange: light-dark(#6e3500, #ffa258); --color-text-orange: light-dark(#6e3500, #ffc9a2); --color-border-yellow: light-dark(#e4c279, #c0990e); --color-icon-yellow: light-dark(#584400, #deb433); --color-text-yellow: light-dark(#584400, #fdcf4f); --color-border-green: light-dark(#b2d1ac, #69ad67); --color-icon-green: light-dark(#0c5700, #84c980); --color-text-green: light-dark(#0c5700, #9fe59b); --color-border-blue: light-dark(#b1c9e7, #6d9cfe); --color-icon-blue: light-dark(#00458c, #9eb7ff); --color-text-blue: light-dark(#00458c, #c7d3ff); }