@charset "UTF-8";
/* ==========================================================================
   Every App v1.5 - Unified Design System
   ========================================================================== */

/* --- Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/InstrumentSans-VariableFont_wdth,wght.ttf') format('truetype-variations'),
       url('fonts/InstrumentSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ==========================================================================
     1. BASE COLOR PALETTES
     ========================================================================== */
  
  /* Dark Palette */
  --everyapp-color-dark-base: rgba(20,20,20,1);    /* #141414 pure gray */
  --everyapp-color-dark-shade-1: rgba(15,15,15,1); /* #0F0F0F */
  --everyapp-color-dark-tint-1: rgba(26,26,26,1);  /* #1A1A1A cards */
  --everyapp-color-dark-tint-2: rgba(34,34,34,1);  /* #222222 */
  --everyapp-color-dark-tint-3: rgba(52,52,52,1);
  --everyapp-color-dark-tint-4: rgba(84,84,84,1);
  --everyapp-color-dark-tint-5: rgba(140,140,140,1);
  
  /* Light Palette */
  --everyapp-color-light-base: rgba(255,255,255,1);
  --everyapp-color-light-shade-1: rgba(247,247,247,1);
  --everyapp-color-light-tint-alpha-6: rgba(255,255,255,0.4);
  
  /* Accent Palette (Blue) */
  --everyapp-color-accent-base: rgba(49,145,240,1);
  --everyapp-color-accent-tint-1: rgba(48,148,242,1);
  --everyapp-color-accent-tint-2: rgba(61,156,245,1);
  
  /* Orange Palette */
  --everyapp-color-orange-base: rgba(244,210,145,1);
  --everyapp-color-orange-tint-1: rgba(246,217,162,1);

  /* ==========================================================================
     2. SEMANTIC DESIGN TOKENS (Mapped to Base Colors)
     ========================================================================== */
  
  /* Backgrounds */
  --everyapp-bg-primary: var(--everyapp-color-dark-base);   /* Main sections */
  --everyapp-bg-secondary: var(--everyapp-color-dark-shade-1); /* Alternating sections */
  --everyapp-bg-tertiary: var(--everyapp-color-dark-tint-1);  /* Cards, CTA, secondary buttons */
  
  /* Text */
  --everyapp-text-heading: var(--everyapp-color-light-base); /* Headings, primary buttons */
  --everyapp-text-paragraph: var(--everyapp-color-light-tint-alpha-6); /* Paragraphs, labels */
  
  /* Interactive & Branding */
  --everyapp-bg-accent: var(--everyapp-color-accent-base); /* Primary buttons, active links */
  --everyapp-gradient-utility: linear-gradient(90deg, var(--everyapp-color-accent-base), var(--everyapp-color-orange-base));

  /* ==========================================================================
     3. GEOMETRY, PADDING, & ENFORCEMENTS
     ========================================================================== */
  
  --everyapp-padding-base: 1rem;
  --everyapp-radius-main: 1.5rem;
  
  /* Flat UI Enforcements */
  --everyapp-stroke: 0;
  --everyapp-shadow: none;

  /* ==========================================================================
     4. TYPOGRAPHY & SIZING SCALES
     ========================================================================== */
  
  /* Font Families */
  --everyapp-font-f1: 'DM Sans', sans-serif;
  --everyapp-font-f2: 'Instrument Sans', sans-serif;

  /* Font Size Scale (converted to rem based on 16px root where applicable) */
  --everyapp-font-s-3: 0.75rem;   /* 12px */
  --everyapp-font-s-2: 0.8125rem; /* 13px */
  --everyapp-font-s-1: 0.9375rem; /* 15px */
  --everyapp-font-s0: 1rem;       /* 16px */
  --everyapp-font-s1: 1.125rem;   /* 18px */
  --everyapp-font-s2: 1.1875rem;  /* 19px */
  --everyapp-font-s3: 1.3125rem;  /* 21px */
  --everyapp-font-s4: 1.4375rem;  /* 23px */
  --everyapp-font-s5: 1.625rem;   /* 26px */
  --everyapp-font-s6: 1.9375rem;  /* 31px */
  --everyapp-font-s7: 2.25rem;    /* 36px */
  --everyapp-font-s8: 2.8125rem;  /* 45px */
  --everyapp-font-s9: 3.75rem;    /* 60px */
}

/* ==========================================================================
   5. GLOBAL RESETS & BASE HTML
   ========================================================================== */

/* Enforce Zero Stroke and Zero Shadow globally */
*, *::before, *::after {
  box-sizing: border-box;
  border: var(--everyapp-stroke) !important;
  outline: var(--everyapp-stroke) !important;
  box-shadow: var(--everyapp-shadow) !important;
}

html, body {
  /* Fluid base text: 16px on mobile, scaling to 18px on desktop */
  font-size: clamp(1rem, 0.875rem + 0.625vw, 1.125rem); 
  background-color: var(--everyapp-bg-primary);
  color: var(--everyapp-text-paragraph);
  font-family: var(--everyapp-font-f2);
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* ==========================================================================
   6. GRID & LAYOUT (Desktop Breakpoint overrides)
   ========================================================================== */

:root {
  --everyapp-gutter: 1rem;
  --everyapp-content-width: 100%;
}

@media screen and (min-width: 501px) {
  :root {
    --everyapp-gutter: 10rem;
    --everyapp-column-1: 37.5rem;   /* 600px */
    --everyapp-column-2: 85rem;     /* 1360px */
    --everyapp-content-width: var(--everyapp-column-2);
  }
}

/* ==========================================================================
   7. FLUID TYPOGRAPHY CLASSES
   ========================================================================== */

/* HEADINGS (Inter Tight, Max-Width 30ch, Light Base Color) */
h1, h2, h3, h4, h5, h6,
.everyapp-h1, .everyapp-h2, .everyapp-h3, .everyapp-h4, .everyapp-h5, .everyapp-h6 {
  font-family: var(--everyapp-font-f1);
  color: var(--everyapp-text-heading);
  max-width: 30ch;
  margin: 0 0 1rem 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.everyapp-h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);   line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; }
.everyapp-h2 { font-size: clamp(2rem, 3.5vw + .75rem, 3.25rem); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; }
.everyapp-h3 { font-size: clamp(1.5rem, 1.75vw + .75rem, 2.25rem); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; }
.everyapp-h4 { font-size: clamp(1.25rem, .75vw + .9rem, 1.625rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.everyapp-h5 { font-size: clamp(1rem, .3vw + .9rem, 1.125rem);   line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.everyapp-h6 { font-size: 0.9375rem; line-height: 1.3; font-weight: 500; }

/* PARAGRAPHS (Open Sans, Max-Width 50ch, Light Tint Color) */
p, label,
.everyapp-t1, .everyapp-t2 {
  font-family: var(--everyapp-font-f2);
  color: var(--everyapp-text-paragraph);
  max-width: 50ch;
  margin: 0 0 1rem 0;
}

.everyapp-t1 { font-size: 1rem;      line-height: 1.55; }
.everyapp-t2 { font-size: 0.8125rem; line-height: 1.5; }

/* ==========================================================================
   8. COMPONENTS & STRUCTURAL LOGIC
   ========================================================================== */

/* Icons: Fixed Bounding Box */
.everyapp-icon-wrapper {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.everyapp-icon-wrapper svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* Card Container (Tertiary Background, Main Radius) */
.everyapp-card {
  background-color: var(--everyapp-bg-tertiary);
  border-radius: var(--everyapp-radius-main);
  padding: var(--everyapp-padding-base);
}

/* Nested Elements inside Card (Math: Parent Radius - Parent Padding) */
.everyapp-card-inner {
  border-radius: calc(var(--everyapp-radius-main) - var(--everyapp-padding-base));
  overflow: hidden;
}

/* Primary Button */
.everyapp-button-primary {
  background-color: var(--everyapp-bg-accent);
  color: var(--everyapp-text-heading);
  font-family: var(--everyapp-font-f1);
  font-size: var(--everyapp-font-s0);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: var(--everyapp-radius-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.everyapp-button-primary:hover {
  background-color: var(--everyapp-color-accent-tint-2);
}

/* Links */
a.everyapp-active, 
.everyapp-link {
  color: var(--everyapp-bg-accent);
  text-decoration: none;
}
.everyapp-link:hover {
  color: var(--everyapp-color-accent-tint-2);
}

/* Utility Gradient Banner */
.everyapp-banner {
  background: var(--everyapp-gradient-utility);
  color: var(--everyapp-text-heading);
  padding: var(--everyapp-padding-base);
  border-radius: var(--everyapp-radius-main);
}