/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url('./fonts.css');

:root {
  /* ========================================
     CLOUD.COM DESIGN SYSTEM - FOUNDATION COLORS
     Based on Cloud.com Style Guide
     ======================================== */

  /* PRIMARY PALETTE - Main Brand Colors */
  --cloud-text-dark-blue: #101828;
  --cloud-blue: #0345D9;
  --cloud-med-blue: #00A1D8;
  --cloud-light-blue: #78D9E8;
  --cloud-dark-blue: #161D70;
  --cloud-link-blue: #0042D7;
  --cloud-neutral-dark-blue-grey-header: #4A5565;
  --cloud-sec-light-blue-3: #DBEAFE;
  --cloud-sec-light-blue-4: #DFE8F2;
  --cloud-sec-light-blue-5: #BEDBFF;
  --cloud-tabs: #EFF6FF;

  /* SECONDARY PALETTE - Supporting Colors */
  --cloud-sec-blue: #0787B5;
  --cloud-sec-med-blue-1: #B0D5FF;
  --cloud-sec-med-blue-2: #D8E7FF;
  --cloud-sec-light-blue-1: #EFEFEF;
  --cloud-sec-light-blue-2: #FFF;
  --cloud-purple-accent: #B21ADF;
  --cloud-orange-accent: #F1AA38;
  --cloud-neutral-light-blue-grey-3: #CDD1DA;
  --cloud-neutral-light-blue-grey-4: #B1B1B1;

  /* NEUTRALS - Grayscale Colors */
  --cloud-white: #FFF;
  --cloud-black: #000;
  --cloud-black-alt: #0a0a0a;
  --cloud-neutral-dark-grey-1: #1D1212;
  --cloud-neutral-dark-grey-2: #555;
  --cloud-neutral-med-grey: #818181;
  --cloud-neutral-light-grey: #CCC;
  --cloud-neutral-light-grey-2: #F3F3F3;
  --cloud-neutral-dark-blue-grey: #49587A;
  --cloud-neutral-med-blue-grey: #9CA8B5;
  --cloud-neutral-light-blue-grey: #CCD1DA;
  --cloud-neutral-light-blue-grey-2: #F0F9FF;
  --cloud-blue-accent: #0DA1DB;

  /* GRADIENTS - Background Gradients */
  --cloud-gradient-button: linear-gradient(180deg, #161D70 0%, #0345D9 100%);
  --cloud-gradient-titles-light: linear-gradient(91deg, #161D70 26.76%, #0345D9 68.15%);
  --cloud-gradient-strokes: linear-gradient(90deg, #161D70 0%, #0345D9 100%);
  --cloud-gradient-titles-dark: linear-gradient(92deg, #FFF 21.29%, #78D9E8 89.11%);
  --cloud-gradient-title-cyan: linear-gradient(90deg, #FFF 0%, #78D9E8 100%);
  --cloud-gradient-site-bg: linear-gradient(90deg, #FFF 0%, #EFF6FF 49.52%, #F0F9FF 100%);
  --cloud-gradient-footer: linear-gradient(167.927deg, #000220 0%, #000e63 50%, #0425ff 100%);
  --cloud-gradient-footer-alt: linear-gradient(137.62deg, #000220 0%, #000e63 50%, #0425ff 100%);
  --icon-gradient: linear-gradient(136deg, #0345D9 26.42%, #0DA1DB 91.88%);
  --milestone-card-shadow: 0 0 10.7px 0 rgb(0 0 0 / 25%);
  --stacked-cards-shadow-blue-light: 0 0 70px 0 #DFF2FE;

  /* ========================================
     SEMANTIC COLORS - Purpose-Based
     These map foundation colors to specific uses
     ======================================== */

  /* Background Colors */
  --color-background-primary: var(--cloud-white);
  --color-background-light: var(--cloud-sec-light-blue-1);
  --color-background-light-blue: var(--cloud-light-blue);
  --color-background-primary-blue: var(--cloud-blue);
  --color-background-dark-blue: var(--cloud-dark-blue);
  --color-background-gradient-light: var(--cloud-gradient-site-bg);
  --color-background-gradient-primary: var(--cloud-gradient-button);

  /* Text Colors - On Surface Colors */
  --color-text-primary: var(--cloud-text-dark-blue);
  --color-text-dark-blue: var(--cloud-text-dark-blue);
  --color-text-secondary: var(--cloud-neutral-med-grey);
  --color-text-link: var(--cloud-link-blue);
  --color-text-on-light: var(--cloud-text-dark-blue);
  --color-text-on-dark: var(--cloud-white);
  --color-text-on-primary: var(--cloud-white);
  --color-text-disabled: var(--cloud-neutral-light-grey);

  /* Container Colors - Cards & Containers */
  --color-container-card-bg: var(--cloud-white);
  --color-container-card-border: var(--cloud-neutral-light-grey);
  --color-container-frame-bg: transparent;
  --color-container-frame-border: var(--cloud-blue);
  --color-container-rich-bg: var(--cloud-blue);
  --color-container-rich-text: var(--cloud-white);

  /* Border Colors */
  --color-border-default: var(--cloud-neutral-light-grey);
  --color-border-subtle: var(--cloud-neutral-light-grey-2);
  --color-border-strong: var(--cloud-neutral-dark-grey-2);
  --color-border-primary: var(--cloud-blue);
  --color-border-light: var(--cloud-neutral-light-blue-grey);
  --color-border-dark: var(--cloud-neutral-dark-grey-1);

  /* Interactive Colors - Links & Buttons */
  --color-interactive-primary: var(--cloud-blue);
  --color-interactive-primary-hover: var(--cloud-dark-blue);
  --color-interactive-secondary: var(--cloud-sec-blue);
  --color-interactive-link: var(--cloud-link-blue);
  --color-interactive-link-hover: var(--cloud-dark-blue);

  /* Feedback Colors - Alerts & Status */
  --color-error: #DC2626;
  --color-error-bg: #FEE2E2;
  --color-error-border: #DC2626;
  --color-success: #16A34A;
  --color-success-bg: #D1FAE5;
  --color-success-border: #16A34A;
  --color-warning: var(--cloud-orange-accent);
  --color-warning-bg: #FEF3C7;
  --color-warning-border: var(--cloud-orange-accent);
  --color-info: var(--cloud-blue);
  --color-info-bg: var(--cloud-sec-med-blue-2);
  --color-info-border: var(--cloud-blue);
  --nav-border-color: #e5e7eb;
  --nav-divider-color: #ccc;
  --nav-mobile-bg: #dbe7ff;

  /* ========================================
     SPACING SYSTEM - Cloud.com Spacing Scale
     Base unit: 4px
     ======================================== */

  /* Base Spacing Unit */
  --space-unit: 4px;

  /* Spacing Scale - Multiples of base unit */
  --space-4x: calc(var(--space-unit) * 1);    /* 4px */
  --space-5x: calc(var(--space-unit) * 1.5);  /* 6px */
  --space-6x: calc(var(--space-unit) * 2);    /* 8px */
  --space-7x: calc(var(--space-unit) * 3);    /* 12px */
  --space-8x: calc(var(--space-unit) * 4);    /* 16px */
  --space-9x: calc(var(--space-unit) * 5);    /* 20px */
  --space-10x: calc(var(--space-unit) * 6);   /* 24px */
  --space-11x: calc(var(--space-unit) * 8);   /* 32px */
  --space-12x: calc(var(--space-unit) * 10);  /* 40px */
  --space-13x: calc(var(--space-unit) * 12);  /* 48px */
  --space-14x: calc(var(--space-unit) * 14);  /* 56px */
  --space-15x: calc(var(--space-unit) * 16);  /* 64px */
  --space-16x: calc(var(--space-unit) * 20);  /* 80px */
  --space-17x: calc(var(--space-unit) * 24);  /* 96px */

  /* Semantic Spacing Names */
  --space-xs: var(--space-6x);    /* 8px - Extra small */
  --space-sm: var(--space-8x);    /* 16px - Small */
  --space-md: var(--space-10x);   /* 24px - Medium */
  --space-lg: var(--space-11x);   /* 32px - Large */
  --space-xl: var(--space-12x);   /* 40px - Extra large */
  --space-2xl: var(--space-13x);  /* 48px - 2X large */
  --space-3xl: 90px;  /* 3X large */
  --space-4xl: var(--space-16x);  /* 80px - 4X large */
  --space-5xl: var(--space-17x);  /* 96px - 5X large */

  /* Component-specific spacing */
  --space-section-sm: var(--space-10x);   /* 24px */
  --space-section-md: var(--space-12x);   /* 40px */
  --space-section-lg: var(--space-15x);   /* 64px */
  --space-section-xl: var(--space-17x);   /* 96px */

  /* ========================================
     BORDER SYSTEM - Cloud.com Border Specifications
     ======================================== */

  /* Border Width - All borders use consistent 1px width */
  --border-width: 1px;

  /* Border Radius - Multiples of 4, aligned with spacing system */
  --radius-4: 4px;      /* Small elements, subtle states, mobile modals */
  --radius-8: 8px;      /* Inputs, buttons, base components */
  --radius-16: 16px;    /* Cards, modals, menus */
  --radius-circle: 100%; /* Icons and circular applications */

  /* Semantic Border Radius Names */
  --radius-sm: var(--radius-4);   /* Small - 4px */
  --radius-md: var(--radius-8);   /* Medium - 8px */
  --radius-lg: var(--radius-16);  /* Large - 16px */
  --radius-full: var(--radius-circle); /* Full circle - 100% */

  /* Component-specific radius (Desktop: 8px-16px, Mobile: 4px-16px) */
  --radius-button: var(--radius-8);      /* 8px for buttons */
  --radius-input: var(--radius-8);       /* 8px for inputs */
  --radius-card: var(--radius-16);       /* 16px for cards */
  --radius-modal: var(--radius-4);       /* 4px for mobile modals */

  /* ========================================
     SHADOWS & ELEVATION - Cloud.com Shadow System (EXACT VALUES)
     Soft shadows to create depth and enhance dimension
     All shadows optimized for light backgrounds
     Multi-layer shadows for sophisticated depth effects
     ======================================== */

  /* Dark Shadow - Neutral depth with dual-layer shadow */
  --shadow-dark: 0 20px 25px -5px rgb(20 0 66 / 10%), 0 8px 10px -6px rgb(20 0 66 / 10%);

  /* Blue Light Shadow - Soft blue glow */
  --shadow-blue-light: 0 0 48px 0 #DFF2FE;

  /* Expanded Blue Shadow - Multi-directional brand shadow with depth */
  --shadow-blue-expanded: -26px 38px 105.7px 0 #BEDBFF, 26px -31px 105.7px 0 #BEDBFF, 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
  --shadow-blue-expanded-1: 38px 38px 105.7px 0 #BEDBFF, 26px 27px 105.7px 0 #BEDBFF, 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);


  /* Light Expand Blue Shadow - Subtle multi-directional brand shadow */
  --shadow-blue-light-expand: -26px 38px 50px 0 rgb(190 219 255 / 30%), 26px -31px 50px 0 rgb(190 219 255 / 30%), 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);

  /* Under XL Blue Shadow - Large shadow underneath */
  --shadow-blue-under-xl: 0 120px 65.4px 0 rgb(190 219 255 / 30%);

  /* Over XL Blue Light Shadow - Large shadow above */
  --shadow-blue-over-xl: 0 -30px 90px 0 #BEDBFF;

  /* Map Tag Shadow - 8-layer sophisticated shadow for floating elements */
  --shadow-map-tag: 0 151px 98px 0 rgb(20 0 66 / 7%), 0 75.574px 49.098px 0 rgb(20 0 66 / 5%), 0 45.522px 40.192px 0 rgb(20 0 66 / 4%), 0 29.173px 42.286px 0 rgb(20 0 66 / 4%), 0 18.908px 41.854px 0 rgb(20 0 66 / 4%), 0 11.902px 36.949px 0 rgb(20 0 66 / 3%), 0 6.838px 27.93px 0 rgb(20 0 66 / 3%), 0 3.01px 15.427px 0 rgb(20 0 66 / 2%);

  /* Elevation Levels - Semantic naming for easier use */
  --elevation-1: var(--shadow-dark);                    /* Base elevation with dual-layer depth */
  --elevation-2: var(--shadow-blue-light-expand);       /* Medium elevation with subtle brand */
  --elevation-3: var(--shadow-blue-expanded);           /* High elevation with strong brand presence */
  --elevation-blue-subtle: var(--shadow-blue-light);    /* Soft blue glow */
  --elevation-blue-strong: var(--shadow-blue-expanded); /* Multi-directional brand shadow */
  --elevation-blue-xl: var(--shadow-blue-under-xl);     /* Maximum brand elevation */

  /* ========================================
     LAYOUT & CONTAINER SYSTEM
     Responsive container widths and padding
     ======================================== */

  /* Container Max Widths */
  --container-width: 80rem;         /* 1280px - Standard container width */
  --container-width-lg: 90rem;      /* 1440px - Large container width */
  --container-width-sm: 64rem;      /* 1024px - Small container width */
  --site-max-width: 1380px;
  --site-gutter: 30px;

  /* Container Horizontal Padding (Responsive) */
  --container-padding: 1rem;        /* Mobile: 16px */

  /* ========================================
     LEGACY COLORS - Backwards Compatibility
     Keep for existing components during migration
     ======================================== */
  --background-color: var(--cloud-white);
  --light-color: var(--cloud-sec-light-blue-1);
  --dark-color: var(--cloud-neutral-dark-grey-2);
  --text-color: var(--cloud-text-dark-blue);
  --link-color: var(--cloud-link-blue);
  --link-hover-color: var(--cloud-dark-blue);

  /* fonts - use locally hosted Public Sans family */
  --body-font-family: 'Public Sans', roboto, roboto-fallback, sans-serif;
  --heading-font-family: 'Public Sans', roboto-condensed, roboto-condensed-fallback, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* body sizes - from Cloud.com Typography Scale */
  --body-font-size-m: 16px;        /* Body Copy */
  --body-font-size-s: 14px;        /* Caption */
  --body-font-size-l: 20px;        /* Intro */

  /* heading sizes - Mobile First (from Cloud.com Typography Scale) */
  --heading-font-size-xxl: 40px;   /* H1 Mobile */
  --heading-font-size-xl: 32px;    /* H2 Mobile */
  --heading-font-size-l: 24px;     /* H3 Mobile */
  --heading-font-size-m: 20px;     /* H4 Mobile */

  /* line heights */
  --body-line-height: 24px;        /* Body Copy Line Height */
  --caption-line-height: 20px;     /* Caption Line Height */
  --intro-line-height: 28px;       /* Intro Line Height */
  --subtitle-line-height: 32px;    /* Subtitle Line Height */

  /* nav height */
  --nav-height: 64px;
}

/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

@media (width >= 900px) {
  :root {
    /* body sizes - Desktop (from Cloud.com Typography Scale) */
    --body-font-size-m: 16px;        /* Body Copy - same on desktop */
    --body-font-size-s: 14px;        /* Caption - same on desktop */
    --body-font-size-l: 20px;        /* Intro - same on desktop */

    /* heading sizes - Desktop (from Cloud.com Typography Scale) */
    --heading-font-size-xxl: 96px;   /* H1 Desktop - Display */
    --heading-font-size-xl: 60px;    /* H2 Desktop */
    --heading-font-size-l: 32px;     /* H3 Desktop */
    --heading-font-size-m: 24px;     /* H4 Desktop */

    /* line heights - Desktop */
    --body-line-height: 24px;
    --caption-line-height: 20px;
    --intro-line-height: 28px;
    --subtitle-line-height: 32px;    /* Subtitle Line Height */

    /* Container Padding - Desktop */
    --container-padding: 2rem;        /* Desktop: 32px */
  }
}

body {
  display: none;
  margin: 0;
  background: var(--cloud-gradient-site-bg);
  color: var(--color-text-primary);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  font-weight: 400; /* Regular weight for body copy */
  line-height: var(--body-line-height);
  min-height: 100vh;
}

body.appear {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

header {
  min-height: var(--nav-height);
}

@media (width >= 900px) {
  header {
    height: var(--nav-height);
  }
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 500; /* Medium weight - Cloud.com uses Regular/Medium/Bold only */
  line-height: 1.2;
  scroll-margin: 40px;
}

/* Heading Sizes - From Cloud.com Typography Scale */
h1 { 
  font-size: var(--heading-font-size-xxl); 
  font-weight: 500; /* Bold for Display/H1 */
}

h2 { 
  font-size: var(--heading-font-size-xl);
  font-weight: 500; /* Medium for H2 */
}

h3 { 
  font-size: var(--heading-font-size-l);
  font-weight: 500; /* Medium for H3 */
}

h4 { 
  font-size: var(--heading-font-size-m);
  font-weight: 500; /* Medium for H4 */
}

h5 { 
  font-size: var(--body-font-size-l); /* Same as Intro */
  font-weight: 500;
}

h6 { 
  font-size: var(--body-font-size-m);
  font-weight: 700; /* Bold for emphasis */
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: 16px;
  border-radius: var(--radius-md);
  background-color: var(--color-background-light);
  overflow-x: auto;
  white-space: pre;
}

main > :is(div, section) {
  margin: 40px 16px;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--color-interactive-link);
  text-decoration: none;
  overflow-wrap: break-word;
  text-underline-offset: 3px;
  border: none;
}

a:hover {
  color: var(--color-interactive-link-hover);
  text-decoration: underline;
}

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-button); /* 8px per style guide */
  padding: 12px 24px;
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(90deg, #161D70 0.01%, #155DFC 100%);
  color: var(--cloud-white);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

a.button:hover,
a.button:focus,
a.button:focus-visible,
button.button:hover,
button.button:focus,
button.button:focus-visible {
  background: var(--cloud-blue);
  color: var(--cloud-white);
  cursor: pointer;
  transform: none;
}

button:disabled,
button:disabled:hover {
  background-color: var(--color-border-subtle);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  transform: none;
}

a.button.secondary,
button.secondary {
  background: #FFF;
  border: var(--border-width) solid #CDD1DA;
  color: #101828;
}

a.button.secondary:hover,
button.secondary:hover {
  background: linear-gradient(90deg, #161D70 0.01%, #155DFC 100%);
  color: var(--cloud-white);
  transform: none;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: 40px 0;
  position: relative;
  z-index: 1;
}

main > .section > div {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--site-max-width) + (var(--site-gutter) * 2)); /* 1440 */
  margin: 0 auto;
  padding: 0 var(--site-gutter); /* 30 */
}

main > .section:first-of-type {
  margin-top: 0;
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--color-background-light);
  margin: 0;
  padding: 40px 0;
}

main .section[class*="shadow-"]:not(.shadow-none) {
  box-shadow: none;
  z-index: 0;
}

main .section.shadow-none .block { box-shadow: none; }
main .section.shadow-dark .block { box-shadow: var(--shadow-dark); }
main .section.shadow-blue-light .block { box-shadow: var(--shadow-blue-light); }
main .section.shadow-blue-expanded .block { box-shadow: var(--shadow-blue-expanded); }
main .section.shadow-blue-light-expand .block { box-shadow: var(--shadow-blue-light-expand); }
main .section.shadow-blue-under-xl .block { box-shadow: var(--shadow-blue-under-xl); }
main .section.shadow-blue-over-xl .block { box-shadow: var(--shadow-blue-over-xl); }
main .section.shadow-map-tag .block { box-shadow: var(--shadow-map-tag); }

/* ========================================
   CLOUD.COM DESIGN SYSTEM - UTILITY CLASSES
   Based on Style Guide Guidelines
   ======================================== */

/* Background Color Utilities */
.bg-white {
  background-color: var(--color-background-primary);
}

.bg-light {
  background-color: var(--color-background-light);
}

.bg-light-blue {
  background-color: var(--color-background-light-blue);
}

.bg-primary-blue {
  background-color: var(--color-background-primary-blue);
  color: var(--color-text-on-primary);
}

.bg-dark-blue {
  background-color: var(--color-background-dark-blue);
  color: var(--color-text-on-dark);
}

.bg-gradient-light {
  background: var(--color-background-gradient-light);
}

.bg-gradient-primary {
  background: var(--color-background-gradient-primary);
  color: var(--color-text-on-primary);
}

/* Site background gradient (White → Light Blue) */
.bg-site {
  background: var(--cloud-gradient-site-bg);
}

/* Text Color Utilities */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--cloud-neutral-dark-grey-2); /* #555 */
}

.text-white {
  color: var(--cloud-white);
}

.text-link {
  color: var(--color-text-link);
}

.text-dark-blue {
  color: var(--cloud-text-dark-blue); /* #101828 */
}

/* Text Gradient Utilities - From Cloud.com Typography Guide */
/* stylelint-disable property-no-vendor-prefix */
.text-gradient-light {
  background: var(--cloud-gradient-titles-light);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-dark {
  background: var(--cloud-gradient-titles-dark);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* stylelint-enable property-no-vendor-prefix */

/* Typography Utility Classes */
.intro-text {
  font-size: var(--body-font-size-l);
  line-height: var(--intro-line-height);
  font-weight: 400;
}

.caption-text {
  font-size: var(--body-font-size-s);
  line-height: var(--caption-line-height);
  font-weight: 400;
}

.body-bold {
  font-weight: 700;
}

/* ========================================
   FONT WEIGHT UTILITIES
   Cloud.com uses Regular (400), Medium (500), Bold (700) only
   ======================================== */

.font-normal {
  font-weight: 400;
}

.font-regular {
  font-weight: 400; /* Alias for font-normal */
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

/* Container Utilities - Card Containers */
.container-card {
  background-color: var(--color-container-card-bg);
  border: var(--border-width) solid var(--color-container-card-border);
  border-radius: var(--radius-card); 
  padding: var(--space-md);
}

.container-card:hover {
  box-shadow: var(--elevation-2);
  transition: box-shadow 0.3s ease;
}

/* Container Utilities - Frame Cards */
.container-frame {
  background-color: var(--color-container-frame-bg);
  border: var(--border-width) solid var(--color-container-frame-border);
  border-radius: var(--radius-card); /* 16px per style guide */
  padding: var(--space-md);
}

/* Container Utilities - Rich Content Containers */
.container-rich {
  background-color: var(--color-container-rich-bg);
  color: var(--color-container-rich-text);
  padding: var(--space-lg);
  border-radius: var(--radius-md); /* 8px */
}

.container-rich h1,
.container-rich h2,
.container-rich h3,
.container-rich h4,
.container-rich h5,
.container-rich h6,
.container-rich p {
  color: var(--color-container-rich-text);
}

/* ========================================
   LAYOUT CONTAINER UTILITIES
   Max-width containers with auto margins and responsive padding
   ======================================== */

/* Standard Container (1280px max-width) */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Large Container (1440px max-width) */
.container-lg {
  width: 100%;
  max-width: var(--container-width-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Small Container (1024px max-width) */
.container-sm {
  width: 100%;
  max-width: var(--container-width-sm);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Full Width Container (no max-width) */
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Container without padding (useful when nested) */
.container-no-padding {
  padding-left: 0;
  padding-right: 0;
}

/* Max-width only utilities (no padding) */
.max-w-1280 {
  max-width: 79rem;
  margin-left: auto;
  margin-right: auto;
}

.max-w-1440 {
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
}

.max-w-1024 {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* Border Utilities - Width & Color */
.border {
  border: var(--border-width) solid var(--color-border-default);
}

.border-default {
  border: var(--border-width) solid var(--color-border-default);
}

.border-subtle {
  border: var(--border-width) solid var(--color-border-subtle);
}

.border-strong {
  border: var(--border-width) solid var(--color-border-strong);
}

.border-primary {
  border: var(--border-width) solid var(--color-border-primary);
}

.border-light {
  border: var(--border-width) solid var(--color-border-light);
}

.border-dark {
  border: var(--border-width) solid var(--color-border-dark);
}

/* Border - Individual Sides */
.border-top {
  border-top: var(--border-width) solid var(--color-border-default);
}

.border-bottom {
  border-bottom: var(--border-width) solid var(--color-border-default);
}

.border-left {
  border-left: var(--border-width) solid var(--color-border-default);
}

.border-right {
  border-right: var(--border-width) solid var(--color-border-default);
}

/* Border Bottom with Color Variations */
.border-bottom-primary {
  border-bottom: var(--border-width) solid var(--color-border-primary);
}

.border-bottom-subtle {
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.border-0 {
  border: none;
}

/* Border Radius Utilities */
.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: var(--radius-sm); /* 4px */
}

.rounded {
  border-radius: var(--radius-md); /* 8px - Default */
}

.rounded-md {
  border-radius: var(--radius-md); /* 8px */
}

.rounded-lg {
  border-radius: var(--radius-lg); /* 16px */
}

.rounded-full {
  border-radius: var(--radius-full); /* 100% - Circle */
}

/* Border Radius - Individual Corners */
.rounded-t {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.rounded-b {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.rounded-l {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.rounded-r {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.rounded-tl {
  border-top-left-radius: var(--radius-md);
}

.rounded-tr {
  border-top-right-radius: var(--radius-md);
}

.rounded-bl {
  border-bottom-left-radius: var(--radius-md);
}

.rounded-br {
  border-bottom-right-radius: var(--radius-md);
}

/* Feedback/Alert Utilities */
.alert {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border-left: calc(var(--border-width) * 4) solid;
  margin: var(--space-sm) 0;
}

.alert-error {
  background-color: var(--color-error-bg);
  color: var(--color-error);
  border-left-color: var(--color-error-border);
}

.alert-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border-left-color: var(--color-success-border);
}

.alert-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border-left-color: var(--color-warning-border);
}

.alert-info {
  background-color: var(--color-info-bg);
  color: var(--color-info);
  border-left-color: var(--color-info-border);
}

/* Button Gradient Utility - no hover animation/transform */
.button-gradient {
  background: var(--cloud-gradient-button);
  color: var(--color-text-on-primary);
  border: none;
}

.button-gradient:hover {
  transform: none;
}

/* Section Spacing Utilities */
.section-spacing-sm {
  padding: var(--space-section-sm) 0;
}

.section-spacing-md {
  padding: var(--space-section-md) 0;
}

.section-spacing-lg {
  padding: var(--space-section-lg) 0;
}

.section-spacing-xl {
  padding: var(--space-section-xl) 0;
}

@media (width >= 900px) {
  .section-spacing-xl {
    padding: 128px 0;
  }
}

/* ========================================
   SPACING UTILITIES - Margin & Padding
   Based on Cloud.com Spacing Scale
   ======================================== */

/* Margin - All Sides */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }

/* Margin - Top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

/* Margin - Bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* Margin - Left */
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }
.ml-2xl { margin-left: var(--space-2xl); }

/* Margin - Right */
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }
.mr-2xl { margin-right: var(--space-2xl); }

/* Margin - Horizontal (Left + Right) */
.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}

.mx-sm {
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
}

.mx-md {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}

.mx-lg {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}

.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Margin - Vertical (Top + Bottom) */
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.my-sm {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Padding - All Sides */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

/* Padding - Top */
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }

/* Padding - Bottom */
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }

/* Padding - Left */
.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }
.pl-xl { padding-left: var(--space-xl); }
.pl-2xl { padding-left: var(--space-2xl); }

/* Padding - Right */
.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }
.pr-xl { padding-right: var(--space-xl); }
.pr-2xl { padding-right: var(--space-2xl); }

/* Padding - Horizontal (Left + Right) */
.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.px-sm {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.px-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.px-lg {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.px-2xl {
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}

/* Padding - Vertical (Top + Bottom) */
.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.py-sm {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.py-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.py-2xl {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.py-3xl {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* Gap Utilities (for Flexbox/Grid) */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.gap-x-xs { column-gap: var(--space-xs); }
.gap-x-sm { column-gap: var(--space-sm); }
.gap-x-md { column-gap: var(--space-md); }
.gap-x-lg { column-gap: var(--space-lg); }

.gap-y-xs { row-gap: var(--space-xs); }
.gap-y-sm { row-gap: var(--space-sm); }
.gap-y-md { row-gap: var(--space-md); }
.gap-y-lg { row-gap: var(--space-lg); }

/* ========================================
   SHADOW UTILITIES - Elevation & Depth
   Based on Cloud.com Shadow System (EXACT VALUES)
   Optimized for light backgrounds
   Multi-layer shadows for sophisticated effects
   ======================================== */

/* No Shadow */
.shadow-none {
  box-shadow: none;
}

/* Dark Shadow - Dual-layer neutral depth */
.shadow {
  box-shadow: var(--shadow-dark);
}

.shadow-dark {
  box-shadow: var(--shadow-dark);
}

/* Blue Light Shadow - Soft blue glow */
.shadow-blue {
  box-shadow: var(--shadow-blue-light);
}

.shadow-blue-light {
  box-shadow: var(--shadow-blue-light);
}

/* Expanded Blue Shadow - Multi-directional brand shadow */
.shadow-blue-expanded {
  box-shadow: var(--shadow-blue-expanded);
}

/* Light Expand Blue Shadow - Subtle multi-directional */
.shadow-blue-light-expand {
  box-shadow: var(--shadow-blue-light-expand);
}

/* XL Directional Shadows - Large brand shadows */
.shadow-blue-under-xl {
  box-shadow: var(--shadow-blue-under-xl);
}

.shadow-blue-over-xl {
  box-shadow: var(--shadow-blue-over-xl);
}

/* Map Tag Shadow - 8-layer sophisticated shadow */
.shadow-map-tag {
  box-shadow: var(--shadow-map-tag);
}

/* Semantic Elevation Classes - Purpose-based naming */
.elevation-1 {
  box-shadow: var(--elevation-1);
}

.elevation-2 {
  box-shadow: var(--elevation-2);
}

.elevation-3 {
  box-shadow: var(--elevation-3);
}

.elevation-blue-subtle {
  box-shadow: var(--elevation-blue-subtle);
}

.elevation-blue-strong {
  box-shadow: var(--elevation-blue-strong);
}

.elevation-blue-xl {
  box-shadow: var(--elevation-blue-xl);
}

/* Hover Elevation - Interactive feedback */
.hover-elevation:hover {
  box-shadow: var(--elevation-2);
  transition: box-shadow 0.3s ease;
}

.hover-elevation-blue:hover {
  box-shadow: var(--elevation-blue-strong);
  transition: box-shadow 0.3s ease;
}

/* ========================================
   ICON UTILITIES - Based on Cloud.com Icon System
   Using Phosphor Icons library
   Regular weight, SVG format
   ======================================== */

/* Icon Containers - With gradient backgrounds */

/* Standard icon container (56x56px with gradient) */
.icon-container {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-16);
  background: var(--cloud-gradient-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-container svg,
.icon-container img {
  width: 28px;
  height: 28px;
  color: var(--cloud-white);
  fill: currentcolor;
}

/* Medium icon container (48x48px) */
.icon-container-md {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-16);
  background: var(--cloud-gradient-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-container-md svg,
.icon-container-md img {
  width: 24px;
  height: 24px;
  color: var(--cloud-white);
  fill: currentcolor;
}

/* Small icon container (40x40px) */
.icon-container-sm {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-8);
  background: var(--cloud-gradient-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-container-sm svg,
.icon-container-sm img {
  width: 20px;
  height: 20px;
  color: var(--cloud-white);
  fill: currentcolor;
}

/* Icon Sizing - Standalone icons without containers */

/* Standard standalone icon (32px - default) */
.icon,
.icon-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon svg,
.icon img,
.icon-md svg,
.icon-md img {
  width: 32px;
  height: 32px;
  color: var(--cloud-neutral-dark-grey-2);
  fill: currentcolor;
}

/* Small standalone icon (16px) */
.icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-sm svg,
.icon-sm img {
  width: 16px;
  height: 16px;
  color: var(--cloud-neutral-dark-grey-2);
  fill: currentcolor;
}

/* Large standalone icon (40px) */
.icon-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-lg svg,
.icon-lg img {
  width: 40px;
  height: 40px;
  color: var(--cloud-neutral-dark-grey-2);
  fill: currentcolor;
}

/* Icon Color Utilities */

/* White icon (for use on dark/colored backgrounds) */
.icon-white svg,
.icon-white img {
  color: var(--cloud-white);
  fill: currentcolor;
}

/* Primary icon (brand blue) */
.icon-primary svg,
.icon-primary img {
  color: var(--cloud-blue);
  fill: currentcolor;
}

/* Secondary icon (medium blue) */
.icon-secondary svg,
.icon-secondary img {
  color: var(--cloud-sec-med-blue-1);
  fill: currentcolor;
}

/* Dark icon (dark blue) */
.icon-dark svg,
.icon-dark img {
  color: var(--cloud-dark-blue);
  fill: currentcolor;
}

/* Neutral icon (dark grey - default) */
.icon-neutral svg,
.icon-neutral img {
  color: var(--cloud-neutral-dark-grey-2);
  fill: currentcolor;
}

/* Light icon (light grey) */
.icon-light svg,
.icon-light img {
  color: var(--cloud-neutral-light-grey-3);
  fill: currentcolor;
}

/* Icon in buttons - adjust sizing */
button .icon svg,
button .icon img,
a.button .icon svg,
a.button .icon img {
  width: 20px;
  height: 20px;
}

@media (width < 900px) {
  :root {
    --site-gutter: 16px;
  }
}