/* InMotion Hosting Design System — Colors & Typography */

/* ============================================================================
   BASE COLORS
   ============================================================================ */

:root {
  /* Brand Primary Colors */
  --imh-red: #C52228;           /* Primary brand red */
  --old-brick: #8F1D22;         /* Darker red for hover states */
  --persian-blue: #2245C4;      /* Primary blue */
  --jacksons-purple: #26093B;   /* Purple for hover/accent */
  --cloud-burst: #1D2855;       /* Deep blue */
  
  /* Neutral Grays */
  --thunder: #2C2227;           /* Darkest gray, primary text */
  --emperor: #505050;           /* Medium gray, secondary text */
  --gray: #808080;              /* Mid gray */
  --alto: #DDDDDD;              /* Light gray borders */
  --ebb: #E8E8E8;               /* Very light gray borders */
  --wild-sand: #F5F5F5;         /* Background gray */
  --hint-of-red: #FFF5F5;       /* Subtle red tint hover */
  
  /* ============================================================================
     SEMANTIC COLORS
     ============================================================================ */
  
  --color-text-primary: var(--thunder);
  --color-text-secondary: var(--emperor);
  --color-text-tertiary: var(--gray);
  --color-text-on-dark: #ffffff;
  
  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--wild-sand);
  --color-bg-tertiary: var(--hint-of-red);
  --color-bg-dark: var(--thunder);
  
  --color-border-light: var(--ebb);
  --color-border-medium: var(--alto);
  
  --color-brand-primary: var(--imh-red);
  --color-brand-secondary: var(--persian-blue);
  --color-brand-accent: var(--jacksons-purple);
  
  /* ============================================================================
     TYPOGRAPHY
     ============================================================================ */
  
  /* Font Families */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Monaco', 'Consolas', 'Courier New', monospace;
  
  /* Font Weights */
  --font-weight-light: 200;
  --font-weight-normal: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ============================================================================
     SPACING SCALE (px)
     ============================================================================ */
  
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  
  /* ============================================================================
     BORDER RADIUS
     ============================================================================ */
  
  --radius-sm: 2px;             /* Default corner radius */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 9999px;        /* Pills and circles */
  
  /* ============================================================================
     SHADOWS
     ============================================================================ */
  
  --shadow-sm: 0 2px 4px rgba(44, 34, 39, 0.08);
  --shadow-md: 0 4px 10px rgba(44, 34, 39, 0.15);
  --shadow-lg: 0 8px 16px rgba(44, 34, 39, 0.12);
  --shadow-xl: 0 8px 24px rgba(44, 34, 39, 0.25);
  
  /* ============================================================================
     TRANSITIONS
     ============================================================================ */
  
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ============================================================================
   SEMANTIC TYPE STYLES
   ============================================================================ */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 56px;
  line-height: 1.05;
  color: var(--thunder);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.15;
  color: var(--thunder);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.2;
  color: var(--thunder);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--thunder);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--thunder);
  margin: 0;
}

h6, .h6 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--thunder);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--emperor);
  margin: 0;
}

.body-sm {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--emperor);
}

.body-xs {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--emperor);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--wild-sand);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ============================================================================
   FONT FACE DECLARATIONS
   ============================================================================ */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');