/* DTW - Detroit Metropolitan Wayne County Airport Theme */
/* Generated from Figma Design Tokens SCSS */

/* Font Imports - commented out to avoid duplicate loading when embedded in host page */
/* @import url("https://p.typekit.net/p.css?s=1&k=lly7wdy&ht=tk&f=14032.14033.14034.14035.56953.56954.56955.56956&a=99116501&app=typekit&e=css"); */

/* latin-ext */
@font-face {
  font-family: 'Aktiv Grotesk';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Fp2ywxg089UriCZa4ET-DJF4e8BH9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Aktiv Grotesk';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Fp2ywxg089UriCZa4Hz-DJF4e8A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Aktiv Grotesk';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Aktiv Grotesk';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "aktiv-grotesk";
  src: url("https://use.typekit.net/af/855c4b/00000000000000007753ca4f/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "aktiv-grotesk";
  src: url("https://use.typekit.net/af/0e4445/00000000000000007753ca37/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
}

:root {
  /* ============================================
     BRAND COLORS (from brands.scss)
     ============================================ */
  
  /* Light Blue */
  --color-light-blue-100: #e6f4fa;
  --color-light-blue-200: #daf2f9;
  --color-light-blue-300: #c2ecf8;
  --color-light-blue-400: #a6e2f6;
  --color-light-blue-500: #7fd5f1;
  --color-light-blue-600: #52c6ed;
  --color-light-blue-700: #27b4e9;
  --color-light-blue-800: #1f85a7;

  /* Blue */
  --color-blue-100: #d3e7f5;
  --color-blue-200: #c2def1;
  --color-blue-300: #add2e8;
  --color-blue-400: #83bcda;
  --color-blue-500: #59a0c9;
  --color-blue-600: #2e83b8;
  --color-blue-700: #0064a7;
  --color-blue-800: #004a78;

  /* Navy */
  --color-navy-100: #ced1e8;
  --color-navy-200: #b5b9d6;
  --color-navy-300: #9ca1c0;
  --color-navy-400: #8289a8;
  --color-navy-500: #697190;
  --color-navy-600: #4f5878;
  --color-navy-700: #364060;
  --color-navy-800: #05243d;

  /* Red */
  --color-red-100: #ffefed;
  --color-red-200: #ffc6bd;
  --color-red-300: #f88f81;
  --color-red-400: #f56957;
  --color-red-500: #f3442d;
  --color-red-600: #c23624;
  --color-red-700: #92291b;

  /* Gray */
  --color-gray-100: #f3f7fc;
  --color-gray-200: #e6e9eb;
  --color-gray-300: #c6c8cf;
  --color-gray-400: #a0a4ac;
  --color-gray-500: #818591;
  --color-gray-600: #616775;
  --color-gray-700: #4e525e;
  --color-gray-800: #3a3e46;
  --color-gray-900: #202126;

  /* Green */
  --color-green-100: #d2f1de;
  --color-green-200: #a4e3bd;
  --color-green-300: #77d49d;
  --color-green-400: #49c67c;
  --color-green-500: #1cb85b;
  --color-green-600: #169349;
  --color-green-700: #116e37;

  /* Base Colors */
  --color-black: #000000;
  --color-white: #ffffff;

  /* ============================================
     ALIAS TOKENS (from alias.scss)
     ============================================ */
  
  /* Primary */
  --primary-100: var(--color-blue-100);
  --primary-200: var(--color-blue-200);
  --primary-300: var(--color-blue-300);
  --primary-400: var(--color-blue-400);
  --primary-500: var(--color-blue-500);
  --primary-600: var(--color-blue-600);
  --primary-700: var(--color-blue-800);
  --primary-800: var(--color-blue-800);
  --primary-900: var(--color-blue-800);
  --primary-default: var(--color-blue-700);

  /* Secondary */
  --secondary-100: var(--color-navy-100);
  --secondary-200: var(--color-navy-200);
  --secondary-300: var(--color-navy-300);
  --secondary-400: var(--color-navy-400);
  --secondary-500: var(--color-navy-500);
  --secondary-600: var(--color-navy-600);
  --secondary-700: var(--color-navy-700);
  --secondary-800: var(--color-navy-800);
  --secondary-default: var(--color-navy-800);

  /* Tertiary */
  --tertiary-100: var(--color-light-blue-100);
  --tertiary-200: var(--color-light-blue-200);
  --tertiary-300: var(--color-light-blue-300);
  --tertiary-400: var(--color-light-blue-400);
  --tertiary-500: var(--color-light-blue-500);
  --tertiary-600: var(--color-light-blue-600);
  --tertiary-800: var(--color-light-blue-800);
  --tertiary-default: var(--color-light-blue-700);

  /* Error */
  --error-100: var(--color-red-100);
  --error-200: var(--color-red-200);
  --error-300: var(--color-red-300);
  --error-400: var(--color-red-400);
  --error-600: var(--color-red-600);
  --error-700: var(--color-red-700);
  --error-default: var(--color-red-500);

  /* Success */
  --success-100: var(--color-green-100);
  --success-200: var(--color-green-200);
  --success-300: var(--color-green-300);
  --success-400: var(--color-green-400);
  --success-600: var(--color-green-600);
  --success-700: var(--color-green-700);
  --success-default: var(--color-green-500);

  /* Neutral */
  --neutral-100: var(--color-gray-100);
  --neutral-200: var(--color-gray-200);
  --neutral-300: var(--color-gray-300);
  --neutral-400: var(--color-gray-400);
  --neutral-500: var(--color-gray-500);
  --neutral-600: var(--color-gray-600);
  --neutral-700: var(--color-gray-700);
  --neutral-800: var(--color-gray-800);
  --neutral-900: var(--color-gray-900);
  --neutral-black: var(--color-black);
  --neutral-white: var(--color-white);

  /* Border Width */
  --border-width-none: 0;
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;

  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 32px;
  --border-radius-rounded: 80px;

  /* ============================================
     TYPOGRAPHY (from fonts.scss & responsive.scss)
     ============================================ */
  
  --font-stack: "aktiv-grotesk", sans-serif;
  --font-stack-header: "aktiv-grotesk", "Aktiv Grotesk", sans-serif;

  /* Font Family overrides for base.css compatibility */
  --font-family-body: 'aktiv-grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'aktiv-grotesk', 'Aktiv Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-numeric: 'aktiv-grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-button: 'aktiv-grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes - Desktop */
  --fontsize-body-sm: 15px;
  --fontsize-body-md: 17px;
  --fontsize-body-lg: 20px;
  --fontsize-heading-h1: 58px;
  --fontsize-heading-h2: 42px;
  --fontsize-heading-h3: 36px;
  --fontsize-heading-h4: 28px;
  --fontsize-heading-h5: 22px;
  --fontsize-heading-h6: 18px;
  --fontsize-button-sm: 15px;
  --fontsize-button-md: 17px;
  --fontsize-button-lg: 20px;
  --fontsize-icon-2xs: 14px;
  --fontsize-icon-xs: 16px;
  --fontsize-icon-sm: 18px;
  --fontsize-icon-md: 24px;
  --fontsize-icon-lg: 28px;
  --fontsize-icon-xl: 32px;
  --fontsize-icon-2xl: 44px;
  --fontsize-icon-3xl: 56px;

  /* Line Heights - Desktop */
  --line-height-heading-h1: 66px;
  --line-height-heading-h2: 52px;
  --line-height-heading-h3: 48px;
  --line-height-heading-h4: 38px;
  --line-height-heading-h5: 32px;
  --line-height-heading-h6: 28px;
  --line-height-body-sm: 22px;
  --line-height-body-md: 26px;
  --line-height-body-lg: 30px;
  --line-height-button-sm: 24px;
  --line-height-button-md: 28px;
  --line-height-button-lg: 34px;

  /* ============================================
     SPACING (from static.scss & responsive.scss)
     ============================================ */
  
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 48px;
  --spacing-5xl: 64px;
  --spacing-6xl: 80px;

  /* Block Padding */
  --block-padding-xs: 48px;
  --block-padding-sm: 64px;
  --block-padding-md: 80px;
  --block-padding-lg: 96px;
  --block-padding-xl: 120px;
  --block-padding-2xl: 144px;
  --block-padding-3xl: 180px;
  --block-padding-4xl: 240px;

  /* ============================================
     GRID (from responsive.scss)
     ============================================ */
  
  --grid-container-margin: 98px;
  --grid-container-gutter: 28px;
  --grid-container-row: 28px;
  --grid-screen-size: 1512px;

  /* ============================================
     LIGHT THEME SEMANTIC TOKENS (from mapped.scss)
     ============================================ */
  
  /* Text */
  --text-kicker: var(--neutral-600);
  --text-heading: var(--secondary-default);
  --text-body: var(--neutral-800);
  --text-action: var(--primary-default);
  --text-action-hover: var(--primary-800);
  --text-disabled: var(--neutral-500);
  --text-success: var(--success-default);
  --text-error: var(--error-600);
  --text-on-action: var(--neutral-white);
  --text-accent: var(--tertiary-500);
  --text-on-disabled: var(--neutral-500);

  /* Surface */
  --surface-page: var(--neutral-white);
  --surface-base: var(--neutral-white);
  --surface-neutral-soft: var(--neutral-100);
  --surface-neutral-muted: var(--neutral-200);
  --surface-neutral-medium: var(--neutral-300);
  --surface-action: var(--primary-default);
  --surface-action-hover: var(--primary-800);
  --surface-action-hover-muted: var(--primary-200);
  --surface-primary-soft: var(--primary-100);
  --surface-primary-muted: var(--primary-300);
  --surface-primary-medium: var(--primary-500);
  --surface-primary-strong: var(--primary-default);
  --surface-secondary-soft: var(--secondary-100);
  --surface-secondary-muted: var(--secondary-300);
  --surface-secondary-medium: var(--secondary-500);
  --surface-secondary-strong: var(--secondary-default);
  --surface-tertiary-soft: var(--tertiary-100);
  --surface-tertiary-muted: var(--tertiary-300);
  --surface-tertiary-medium: var(--tertiary-500);
  --surface-tertiary-strong: var(--tertiary-default);
  --surface-success: var(--success-100);
  --surface-error: var(--error-100);
  --surface-error-strong: var(--error-default);
  --surface-disabled: var(--neutral-200);

  /* Icon */
  --icon-primary-medium: var(--primary-400);
  --icon-primary-strong: var(--primary-default);
  --icon-secondary-medium: var(--secondary-400);
  --icon-secondary-strong: var(--secondary-600);
  --icon-tertiary-medium: var(--tertiary-400);
  --icon-tertiary-strong: var(--tertiary-600);
  --icon-neutral: var(--neutral-600);
  --icon-error: var(--error-default);
  --icon-success: var(--success-default);
  --icon-action: var(--primary-default);
  --icon-action-hover: var(--primary-700);
  --icon-on-action: var(--neutral-white);
  --icon-disabled: var(--neutral-500);
  --icon-on-disabled: var(--neutral-600);

  /* Border */
  --border-neutral-soft: var(--neutral-100);
  --border-neutral-muted: var(--neutral-200);
  --border-neutral-medium: var(--neutral-300);
  --border-primary: var(--primary-200);
  --border-primary-strong: var(--primary-800);
  --border-secondary: var(--secondary-300);
  --border-tertiary: var(--tertiary-300);
  --border-error: var(--error-400);
  --border-success: var(--success-400);
  --border-disabled: var(--neutral-300);
  --border-action: var(--primary-600);
  --border-action-hover: var(--primary-default);
  --border-focus: var(--tertiary-default);

  /* Gradients */
  --gradient-primary-500: var(--primary-500);
  --gradient-primary-600: var(--primary-default);
  --gradient-primary-700: var(--primary-700);
  --gradient-primary-800: var(--primary-800);
  --gradient-secondary-500: var(--secondary-default);
  --gradient-secondary-600: var(--secondary-600);
  --gradient-secondary-700: var(--secondary-700);
  --gradient-secondary-800: var(--secondary-800);

  /* Block */
  --block-primary: var(--neutral-white);
  --block-secondary: var(--neutral-100);
  --block-tertiary: var(--tertiary-100);
  --block-quaternary: var(--primary-100);

  /* ============================================
     AIRPORT-SPECIFIC TOKENS
     ============================================ */
  
  --airport-primary: #0064a7;
  --airport-primary-dark: #004a78;
  --airport-primary-light: #2e83b8;
  --airport-secondary: #05243d;
  --airport-secondary-dark: #021829;
  --airport-secondary-light: #364060;
  --airport-font-family: "aktiv-grotesk", sans-serif;
  --airport-font-family-heading: "aktiv-grotesk", "Aktiv Grotesk", sans-serif;
  --airport-bg-primary: #ffffff;
  --airport-bg-secondary: #f3f7fc;
  --airport-bg-tertiary: #e6e9eb;
  --airport-text-primary: #05243d;
  --airport-text-secondary: #4e525e;
  --airport-text-muted: #818591;
  --airport-border-color: #e6e9eb;
  --airport-border-accent: #27b4e9;
}

/* ============================================
   DARK THEME (from mapped.scss)
   ============================================ */

[data-theme="dark"] {
  /* Text */
  --text-kicker: var(--neutral-100);
  --text-heading: var(--neutral-white);
  --text-body: var(--neutral-100);
  --text-action: var(--neutral-white);
  --text-action-hover: var(--neutral-white);
  --text-disabled: var(--neutral-300);
  --text-success: var(--success-default);
  --text-error: var(--error-600);
  --text-on-action: var(--primary-600);
  --text-accent: var(--tertiary-default);
  --text-on-disabled: var(--neutral-500);

  /* Surface */
  --surface-page: var(--primary-800);
  --surface-base: var(--primary-800);
  --surface-neutral-soft: var(--neutral-900);
  --surface-neutral-muted: var(--neutral-800);
  --surface-neutral-medium: var(--neutral-700);
  --surface-action: var(--neutral-white);
  --surface-action-hover: var(--primary-200);
  --surface-action-hover-muted: var(--primary-200);
  --surface-primary-soft: var(--primary-default);
  --surface-primary-muted: var(--primary-600);
  --surface-primary-medium: var(--primary-500);
  --surface-primary-strong: var(--primary-400);
  --surface-secondary-soft: var(--secondary-700);
  --surface-secondary-muted: var(--secondary-600);
  --surface-secondary-medium: var(--secondary-500);
  --surface-secondary-strong: var(--secondary-400);
  --surface-tertiary-soft: var(--tertiary-default);
  --surface-tertiary-muted: var(--tertiary-600);
  --surface-tertiary-medium: var(--tertiary-500);
  --surface-tertiary-strong: var(--tertiary-400);
  --surface-success: var(--success-100);
  --surface-error: var(--error-100);
  --surface-error-strong: var(--error-100);
  --surface-disabled: var(--neutral-200);

  /* Icon */
  --icon-primary-medium: var(--primary-100);
  --icon-primary-strong: var(--primary-300);
  --icon-secondary-medium: var(--secondary-100);
  --icon-secondary-strong: var(--secondary-300);
  --icon-tertiary-medium: var(--tertiary-100);
  --icon-tertiary-strong: var(--tertiary-300);
  --icon-neutral: var(--neutral-100);
  --icon-error: var(--error-default);
  --icon-success: var(--success-default);
  --icon-action: var(--primary-100);
  --icon-action-hover: var(--primary-100);
  --icon-on-action: var(--primary-default);
  --icon-disabled: var(--neutral-300);
  --icon-on-disabled: var(--neutral-600);

  /* Border */
  --border-neutral-soft: var(--neutral-100);
  --border-neutral-muted: var(--neutral-800);
  --border-neutral-medium: var(--neutral-700);
  --border-primary: var(--primary-default);
  --border-primary-strong: var(--primary-800);
  --border-secondary: var(--secondary-300);
  --border-tertiary: var(--tertiary-300);
  --border-error: var(--error-400);
  --border-success: var(--success-400);
  --border-disabled: var(--neutral-300);
  --border-action: var(--neutral-white);
  --border-action-hover: var(--primary-default);
  --border-focus: var(--secondary-500);

  /* Block */
  --block-primary: var(--primary-900);
  --block-secondary: var(--primary-800);
  --block-tertiary: var(--primary-default);
  --block-quaternary: var(--secondary-default);
}

/* ============================================
   TABLET RESPONSIVE (max-width: 991px)
   ============================================ */

@media (max-width: 991px) {
  :root {
    --fontsize-heading-h1: 44px;
    --fontsize-heading-h2: 32px;
    --fontsize-heading-h3: 28px;
    --fontsize-heading-h4: 22px;
    --fontsize-heading-h5: 18px;
    --fontsize-heading-h6: 16px;
    --line-height-heading-h1: 52px;
    --line-height-heading-h2: 40px;
    --line-height-heading-h3: 36px;
    --line-height-heading-h4: 32px;
    --line-height-heading-h5: 28px;
    --line-height-heading-h6: 24px;
    --spacing-3xs: 1px;
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 48px;
    --spacing-6xl: 64px;
    --block-padding-xs: 24px;
    --block-padding-sm: 32px;
    --block-padding-md: 40px;
    --block-padding-lg: 48px;
    --block-padding-xl: 64px;
    --block-padding-2xl: 80px;
    --block-padding-3xl: 96px;
    --block-padding-4xl: 96px;
    --grid-container-margin: 20px;
    --grid-container-gutter: 24px;
    --grid-container-row: 24px;
  }
}

/* ============================================
   MOBILE RESPONSIVE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
  :root {
    --fontsize-heading-h1: 44px;
    --fontsize-heading-h2: 32px;
    --fontsize-heading-h3: 28px;
    --fontsize-heading-h4: 22px;
    --fontsize-heading-h5: 18px;
    --fontsize-heading-h6: 16px;
    --line-height-heading-h1: 52px;
    --line-height-heading-h2: 40px;
    --line-height-heading-h3: 36px;
    --line-height-heading-h4: 32px;
    --line-height-heading-h5: 28px;
    --line-height-heading-h6: 24px;
    --spacing-3xs: 1px;
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 48px;
    --spacing-6xl: 64px;
    --block-padding-xs: 24px;
    --block-padding-sm: 32px;
    --block-padding-md: 40px;
    --block-padding-lg: 48px;
    --block-padding-xl: 64px;
    --block-padding-2xl: 80px;
    --block-padding-3xl: 96px;
    --block-padding-4xl: 96px;
    --grid-container-margin: 16px;
    --grid-container-gutter: 16px;
    --grid-container-row: 16px;
  }
}

/* ============================================
   COMPONENT OVERRIDES
   ============================================ */

.airport-header {
  background: var(--airport-primary);
  color: white;
}

.airport-accent {
  color: var(--tertiary-default);
}

.airport-link {
  color: var(--airport-primary);
}

.airport-link:hover {
  color: var(--tertiary-default);
}