/* 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;
  }
}