178 lines
5.0 KiB
CSS
178 lines
5.0 KiB
CSS
/* Generated from Figma DTCG Design Tokens */
|
|
|
|
:root {
|
|
--color-blue-100: #F8FAFF;
|
|
--color-blue-200: #E6F0FE;
|
|
--color-blue-300: #82B5FF;
|
|
--color-blue-400: #3D8AFA;
|
|
--color-blue-500: #1557A6;
|
|
--color-blue-600: #103F7F;
|
|
--color-blue-700: #0B2F5F;
|
|
--color-blue-800: #091C3F;
|
|
--color-blue-900: #07132F;
|
|
--color-blue-950: #010D27;
|
|
--color-blue-white: #F8FAFF;
|
|
--color-slate-300: #C3CFE0;
|
|
--color-slate-400: #A3B1C6;
|
|
--color-slate-600: #667085;
|
|
--color-slate-800: #38526E;
|
|
--color-border-light: #D9E2EF;
|
|
--color-border-dark: #1E3458;
|
|
--color-border-strong-light: #A9BEDA;
|
|
--color-border-strong-dark: #426B9D;
|
|
--color-black: #07132F;
|
|
--space-0: 0;
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.5rem;
|
|
--space-6: 2rem;
|
|
--space-7: 2.5rem;
|
|
--space-8: 3rem;
|
|
--space-9: 4rem;
|
|
--space-10: 5rem;
|
|
--space-11: 6rem;
|
|
--space-12: 7.5rem;
|
|
--radius-sm: 0.5rem;
|
|
--radius-md: 0.75rem;
|
|
--radius-lg: 1rem;
|
|
--radius-xl: 1.5rem;
|
|
--radius-pill: 9999px;
|
|
--stroke-default: 1px;
|
|
--stroke-strong: 2px;
|
|
--layout-frame: 1440px;
|
|
--layout-container: 1320px;
|
|
--layout-page-gutter: 3.75rem;
|
|
--layout-grid-gutter: 1.5rem;
|
|
--layout-grid-column: 5.5rem;
|
|
--layout-section-gap: 7.5rem;
|
|
--layout-section-padding: 6rem;
|
|
--layout-text-measure: 45rem;
|
|
--size-icon-sm: 1rem;
|
|
--size-icon-md: 1.25rem;
|
|
--size-icon-lg: 1.5rem;
|
|
--size-icon-button: 2.75rem;
|
|
--size-button-height: 3rem;
|
|
--size-social-button: 3.5rem;
|
|
--size-avatar: 12.5rem;
|
|
--size-journey-image: 6rem;
|
|
--size-project-width: 22.5rem;
|
|
--size-project-media-height: 14.0625rem;
|
|
--size-tool-tile: 4.5rem;
|
|
--font-size-display-hero: 4rem;
|
|
--font-size-display-footer: 3rem;
|
|
--font-size-h1: 2.5rem;
|
|
--font-size-h2: 2rem;
|
|
--font-size-h3: 1.25rem;
|
|
--font-size-body-large: 1.125rem;
|
|
--font-size-body-default: 1rem;
|
|
--font-size-body-small: 0.9375rem;
|
|
--font-size-label-small: 0.75rem;
|
|
--font-size-button: 0.9375rem;
|
|
--line-height-display-hero: 4.5rem;
|
|
--line-height-display-footer: 3.5rem;
|
|
--line-height-h1: 3.25rem;
|
|
--line-height-h2: 2.625rem;
|
|
--line-height-h3: 1.75rem;
|
|
--line-height-body-large: 1.875rem;
|
|
--line-height-body-default: 1.625rem;
|
|
--line-height-body-small: 1.5rem;
|
|
--line-height-label-small: 1.125rem;
|
|
--line-height-button: 1.25rem;
|
|
--letter-spacing-eyebrow: 0.16em;
|
|
--motion-duration-fast: 140ms;
|
|
--motion-duration-default: 200ms;
|
|
--motion-duration-reveal: 500ms;
|
|
--motion-duration-hero: 650ms;
|
|
--motion-stagger: 50ms;
|
|
--motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
|
--motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
|
|
|
|
/* Semantic Tokens (Light) */
|
|
--bg-page: #F8FAFF;
|
|
--bg-surface: #F1F6FD;
|
|
--bg-raised: #FCFDFF;
|
|
--bg-subtle: #E6F0FE;
|
|
--text-primary: #0B2F5F;
|
|
--text-secondary: #38526E;
|
|
--text-muted: #667085;
|
|
--text-on-band: #FFFFFF;
|
|
--border-default: #D9E2EF;
|
|
--border-strong: #A9BEDA;
|
|
--accent-default: #3D8AFA;
|
|
--action-link: #1557A6;
|
|
--action-primary-bg: #103F7F;
|
|
--action-primary-fg: #F8FAFF;
|
|
--action-primary-hover: #0B3268;
|
|
--action-primary-pressed: #08284F;
|
|
--brand-band: #103F7F;
|
|
--focus-ring: #3D8AFA;
|
|
--overlay-contact: rgba(255, 255, 255, 0.721569);
|
|
--shadow-color: rgba(16, 63, 127, 0.078431);
|
|
|
|
/* Hero Scenic Landscape Palette (Day / Light Mode) */
|
|
--hero-illus-cube-top: #9DCDFD;
|
|
--hero-illus-cube-front: #2066AB;
|
|
--hero-illus-cube-side: #0E4073;
|
|
--hero-illus-cube-shadow: #0C234F;
|
|
--hero-illus-tree-light: #2166A9;
|
|
--hero-illus-tree-dark: #104179;
|
|
--hero-illus-tree-trunk: #08234B;
|
|
--hero-illus-sun: #FFE66D;
|
|
--hero-illus-sun-glow: rgba(255, 220, 80, 0.6);
|
|
--hero-illus-moon: #FFFDF0;
|
|
--hero-illus-moon-glow: rgba(255, 253, 240, 0.4);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
/* Semantic Tokens (Dark) */
|
|
--bg-page: #04132D;
|
|
--bg-surface: #061943;
|
|
--bg-raised: #081737;
|
|
--bg-subtle: #0A2852;
|
|
--text-primary: #F8FAFF;
|
|
--text-secondary: #C3CFE0;
|
|
--text-muted: #A3B1C6;
|
|
--text-on-band: #F8FAFF;
|
|
--border-default: #1E3458;
|
|
--border-strong: #426B9D;
|
|
--accent-default: #82B5FF;
|
|
--action-link: #82B5FF;
|
|
--action-primary-bg: #F8FAFF;
|
|
--action-primary-fg: #010D27;
|
|
--action-primary-hover: #DCE8F7;
|
|
--action-primary-pressed: #C3D5EC;
|
|
--brand-band: #3D8AFA;
|
|
--focus-ring: #82B5FF;
|
|
--overlay-contact: #081737;
|
|
--shadow-color: rgba(0, 0, 0, 0.239216);
|
|
|
|
/* Hero Scenic Landscape Palette (Night / Dark Mode) */
|
|
--hero-illus-cube-top: #528AE6;
|
|
--hero-illus-cube-front: #1D4685;
|
|
--hero-illus-cube-side: #122955;
|
|
--hero-illus-cube-shadow: #091A3E;
|
|
--hero-illus-tree-light: #428CE8;
|
|
--hero-illus-tree-dark: #18366B;
|
|
--hero-illus-tree-trunk: #0A1B3D;
|
|
--hero-illus-sun: #FDE047;
|
|
--hero-illus-sun-glow: rgba(253, 224, 71, 0.45);
|
|
--hero-illus-moon: #FFFDF0;
|
|
--hero-illus-moon-glow: rgba(255, 253, 240, 0.65);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
:root {
|
|
--layout-page-gutter: 2rem;
|
|
--layout-section-padding: 5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 650px) {
|
|
:root {
|
|
--layout-page-gutter: 1.25rem;
|
|
--layout-section-padding: 4rem;
|
|
}
|
|
}
|