*, *::before, *::after { box-sizing: border-box; } :root { --font-tw: "Noto Sans TC", sans-serif; --font-en: "Montserrat", "Montserrat Fallback", sans-serif; /* -------------------------------------------------------------------------- FONT SIZES -------------------------------------------------------------------------- */ --scale-2xs: clamp(0.625rem, 1.4vw, 0.75rem); /* 10–12px */ --scale-xs: clamp(0.75rem, 1.8vw, 0.875rem); /* 12–14px */ --scale-sm: clamp(0.875rem, 2vw, 1rem); /* 14–16px */ --scale-base: clamp(1rem, 2.2vw, 1.125rem); /* 16–18px */ --scale-lg: clamp(1.125rem, 2.5vw, 1.375rem); /* 18–22px */ --scale-xl: clamp(1.375rem, 3.5vw, 1.75rem); /* 22–28px */ --scale-2xl: clamp(1.75rem, 4.5vw, 2.25rem); /* 28–36px */ --scale-3xl: clamp(2.25rem, 6vw, 3rem); /* 36–48px */ --scale-4xl: clamp(3rem, 8vw, 4rem); /* 48–64px */ --scale-5xl: clamp(3.75rem, 10vw, 5rem); /* 60–80px */ /* -------------------------------------------------------------------------- FONT WEIGHTS -------------------------------------------------------------------------- */ --weight-thin: 100; --weight-extralight: 200; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* -------------------------------------------------------------------------- LINE HEIGHTS -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- LINE HEIGHTS (retuned for CJK / Noto Sans TC) -------------------------------------------------------------------------- */ --lh-display: 1.25; /* was 1.05 */ --lh-heading: 1.4; /* was 1.2 */ --lh-subhead: 1.5; /* was 1.3 */ --lh-body: 1.75; /* was 1.65 */ --lh-caption: 1.6; /* was 1.5 */ --lh-label: 1.5; /* was 1.4 */ /* -------------------------------------------------------------------------- LETTER SPACING (retuned for CJK / Noto Sans TC) -------------------------------------------------------------------------- */ --ls-display: 0em; /* was -0.025em */ --ls-heading: 0em; /* was -0.015em */ --ls-subhead: 0em; /* was -0.01em */ --ls-body: 0.02em; /* was 0em */ --ls-label: 0.08em; /* was 0.06em */ --ls-caption: 0.02em; /* was 0.01em */ /* Feature Grid Spacing */ --page-x: clamp(var(--space-6), 5vw, var(--space-16)); /* -------------------------------------------------------------------------- COLORS -------------------------------------------------------------------------- */ /* Core brand */ --color-ink: #08264d; --color-ink-secondary: #4a4448; /* muted text, placeholders */ --color-ink-tertiary: #6b6568; /* captions, disabled */ --color-ink-disabled: #a09b9c; /* Accent — blue */ --color-blue: #0156d7; --color-blue-hover: #013c97; /* darken ~8% */ --color-blue-active: #002256; /* darken ~16% */ --color-blue-subtle: #ebf3fb; /* tints for chips, highlights */ --color-blue-muted: #b3d0ef; --color-blue-disabled: #758db3; --color-blue-card: #2c7eff; --color-blue-card-light: #6db8ff; --color-blue-card-dark: #0e3a64; /* Surfaces */ --color-surface: #ffffff; --color-surface-raised: #f8f6f6; --color-surface-sunken: #f0eded; /* Borders */ --color-border: rgba(32, 28, 29, 0.1); --color-border-strong: rgba(32, 28, 29, 0.2); --color-border-focus: #3079c9; /* Semantic */ --color-success: #2a7d4f; --color-success-subtle: #eaf5ee; --color-warning: #a05c10; --color-warning-subtle: #fef3e2; --color-danger: #c1362b; --color-danger-subtle: #fdecea; /* -------------------------------------------------------------------------- SPACING SCALE Base unit: 4px. Every spacing value is a multiple. -------------------------------------------------------------------------- */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* -------------------------------------------------------------------------- BORDER RADIUS -------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* pill / avatar */ /* -------------------------------------------------------------------------- SHADOWS -------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(32, 28, 29, 0.06); --shadow-md: 0 2px 8px rgba(32, 28, 29, 0.08), 0 1px 2px rgba(32, 28, 29, 0.04); --shadow-lg: 0 8px 24px rgba(32, 28, 29, 0.1), 0 2px 6px rgba(32, 28, 29, 0.05); --shadow-xl: 0 16px 48px rgba(32, 28, 29, 0.12); /* Focus ring — always use blue */ --shadow-focus: 0 0 0 3px rgba(48, 121, 201, 0.3); /* -------------------------------------------------------------------------- TRANSITIONS -------------------------------------------------------------------------- */ --transition-fast: 80ms ease; --transition-base: 150ms ease; --transition-slow: 300ms ease; --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* -------------------------------------------------------------------------- Z-INDEX SCALE -------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ========================================================================== LANGUAGE-SCOPED HELPERS Apply font-family automatically based on lang attribute. Usage: or ... ========================================================================== */ :lang(en), :lang(en-US), :lang(en-GB) { font-family: var(--font-en); } /* ========================================================================== SEMANTIC TYPOGRAPHY CLASSES Use these on elements, not raw token variables. ========================================================================== */ /* --- Display --- */ .text-display { font-size: var(--scale-4xl); font-weight: var(--weight-bold); line-height: var(--lh-display); letter-spacing: var(--ls-display); } /* --- H1 --- */ .text-h1 { font-size: var(--scale-3xl); font-weight: var(--weight-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); } /* --- H2 --- */ .text-h2 { font-size: var(--scale-2xl); font-weight: var(--weight-semibold); line-height: var(--lh-heading); letter-spacing: var(--ls-subhead); } /* --- H3 --- */ .text-h3 { font-size: var(--scale-xl); font-weight: var(--weight-semibold); line-height: var(--lh-subhead); } /* --- H4 --- */ .text-h4 { font-size: var(--scale-lg); font-weight: var(--weight-medium); line-height: var(--lh-subhead); } /* --- Body --- */ .text-body-lg { font-size: var(--scale-base); font-weight: var(--weight-regular); line-height: var(--lh-body); } .text-body { font-size: var(--scale-sm); font-weight: var(--weight-regular); line-height: var(--lh-body); } /* --- Caption --- */ .text-caption { font-size: var(--scale-xs); font-weight: var(--weight-regular); line-height: var(--lh-caption); color: var(--color-ink-tertiary); } /* --- Label (UI / uppercase caps) --- */ .text-label { font-family: var(--font-tw); /* always EN font for labels */ font-size: var(--scale-2xs); font-weight: var(--weight-semibold); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-ink-secondary); } /* --- Highlight / Inline accent --- */ .text-highlight { color: var(--color-blue); font-weight: var(--weight-medium); } @font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 100.2%; /* tune this so fallback matches Montserrat's width/line-height */ ascent-override: 96%; }