/*
    COLORS, SPACING, FONT SIZES, SHADOWS
    THIS FILE STORES YOUR DESIGN SYSTEM VALUES
    THIS FILE SAYS, "THESE ARE MY BRAND COLORS, SPACING RULES, BORDER RADIUS, AND OTHER REUSABLE DESIGN VALUES."
*/

:root {
  /* Brand colors */
  --color-primary: #0057ff;
  --color-primary-dark: #003bb3;
  --color-primary-soft: #eef4ff;

  /* Neutrals */
  --color-dark: #061331;
  --color-text: #1c2a44;
  --color-muted: #5f6f89;
  --color-light: #f6f9ff;
  --color-white: #ffffff;
  --color-border: #dfe7f3;

  /* Backgrounds */
  --bg-nav:  #ffffff;
  --bg-body: #ffffff;
  --bg-soft: #f7faff;
  --bg-card: #ffffff;

  /* Typography */
  --font-main: Arial, Helvetica, sans-serif;

  --text-xs: clamp(0.7em, 0.65em + 0.15vw, 0.8em);
  --text-sm: clamp(0.85em, 0.8em + 0.2vw, 0.95em);
  --text-base: clamp(1em, 0.95em + 0.25vw, 1.1em);
  --text-md: clamp(1.1em, 1em + 0.45vw, 1.35em);
  --text-lg: clamp(1.35em, 1.15em + 0.9vw, 1.8em);
  --text-xl: clamp(2em, 1.45em + 2.4vw, 3.2em);
  --text-2xl: clamp(2.6em, 1.8em + 4vw, 5em);

  /* Spacing */
  --space-xs: clamp(0.4em, 0.35em + 0.25vw, 0.6em);
  --space-sm: clamp(0.65em, 0.55em + 0.45vw, 0.9em);
  --space-md: clamp(1em, 0.85em + 0.7vw, 1.35em);
  --space-lg: clamp(1.4em, 1.05em + 1.4vw, 2.25em);
  --space-xl: clamp(2em, 1.45em + 2.2vw, 3.5em);
  --space-2xl: clamp(3em, 2em + 4vw, 5.5em);
  --space-3xl: clamp(4em, 2.6em + 6vw, 8em);

  /* Layout */
  --container-width: 90%;
  --container-max-width: 75em;
  --container-padding: clamp(1em, 0.75em + 1.2vw, 2em);

  /* Radius */
  --radius-sm: 0.5em;
  --radius-md: clamp(0.75em, 0.65em + 0.4vw, 1em);
  --radius-lg: clamp(1em, 0.85em + 0.75vw, 1.5em);
  --radius-xl: clamp(1.35em, 1em + 1.5vw, 2.25em);
  --radius-pill: 999em;

  /* Shadows */
  --shadow-soft: 0 0.75em 1.875em rgba(6, 19, 49, 0.08);
  --shadow-card: 0 1em 2.5em rgba(6, 19, 49, 0.1);
  --shadow-button: 0 0.625em 1.5em rgba(0, 87, 255, 0.25);

  /* Borders */
  --border-light: 0.0625em solid var(--color-border);

  /* Transitions */
  --transition-fast: 180ms ease;
  --transition-normal: 250ms ease;

  /* Margins */
  --margin-sm: 5%;
}