/*
    COLORS
*/
:root {
  --black: #000000;
  --white: #ffffff;
  --colors-secondary-50: #f9fafb;
  --colors-secondary-100: #f3f4f6;
  --colors-secondary-200: #e5e7eb;
  --colors-secondary-300: #d1d5db;
  --colors-secondary-400: #9ca3af;
  --colors-secondary-500: #6b7280;
  --colors-secondary-600: #4b5563;
  --colors-secondary-700: #374151;
  --colors-secondary-800: #1f2a37;
  --colors-secondary-900: #111928;
  --colors-neutral-50: #f9fafb;
  --colors-neutral-100: #f3f4f6;
  --colors-neutral-200: #e5e7eb;
  --colors-neutral-300: #d1d5db;
  --colors-neutral-400: #9ca3af;
  --colors-neutral-500: #6b7280;
  --colors-neutral-600: #4b5563;
  --colors-neutral-700: #374151;
  --colors-neutral-800: #1f2a37;
  --colors-neutral-900: #111928;
  --colors-error-50: #fdf2f2;
  --colors-error-100: #fde8e8;
  --colors-error-200: #fbd5d5;
  --colors-error-300: #f8b4b4;
  --colors-error-400: #f98080;
  --colors-error-500: #f05252;
  --colors-error-600: #e02424;
  --colors-error-700: #c81e1e;
  --colors-error-800: #9b1c1c;
  --colors-error-900: #771d1d;
  --colors-warning-50: #fff8f1;
  --colors-warning-100: #feecdc;
  --colors-warning-200: #fcd9bd;
  --colors-warning-300: #fdba8c;
  --colors-warning-400: #ff8a4c;
  --colors-warning-500: #ff5a1f;
  --colors-warning-600: #d03801;
  --colors-warning-700: #b43403;
  --colors-warning-800: #8a2c0d;
  --colors-warning-900: #771d1d;
  --colors-success-50: #f3faf7;
  --colors-success-100: #def7ec;
  --colors-success-200: #bcf0da;
  --colors-success-300: #84e1bc;
  --colors-success-400: #31c48d;
  --colors-success-500: #0e9f6e;
  --colors-success-600: #057a55;
  --colors-success-700: #046c4e;
  --colors-success-800: #03543f;
  --colors-success-900: #014737;
  --colors-info-50: #ebf5ff;
  --colors-info-100: #e1effe;
  --colors-info-200: #c3ddfd;
  --colors-info-300: #a4cafe;
  --colors-info-400: #76a9fa;
  --colors-info-500: #3f83f8;
  --colors-info-600: #1c64f2;
  --colors-info-700: #1a56db;
  --colors-info-800: #1e429f;
  --colors-info-900: #233876;
  --colors-primary-50: #ebf5ff;
  --colors-primary-100: #e1effe;
  --colors-primary-200: #c3ddfd;
  --colors-primary-300: #a4cafe;
  --colors-primary-400: #76a9fa;
  --colors-primary-500: #3f83f8;
  --colors-primary-600: #1c64f2;
  --colors-primary-700: #1a56db;
  --colors-primary-800: #1e429f;
  --colors-primary-900: #233876;

  --colors-tertiary-100: #edebfe;
  --colors-tertiary-800: #5521b5;
  --colors-tertiary-900: #6c2bd9;

  /*
   Background
  */
  --background-default: var(--white);
  --background-subtle: var(--white); /* Sections background */
  --background-muted: var(--colors-neutral-50); /* Footers, code blocks */

  /*
    Foreground
  */
  --foreground-default: var(
    --colors-neutral-900
  ); /* Default color for text, icons on background */
  --foreground-muted: var(
    --colors-neutral-500
  ); /* Color for muted text, icons on background, e.g. helper text */
  --foreground-on-background: var(
    --colors-primary-500
  ); /* Universal colour for any background */

  /*
    Surface
  */
  --surface-default-bg: var(--background-default);
  --surface-subtle-bg: var(--colors-primary-50);
  --surface-raised-bg: var(--white); /* Cards, elevated elements */
  --surface-overlay-bg: var(--white); /* Modal, popover */
  --surface-inverse-bg: var(--white); /* Light surface on dark mode */

  /*
    SPACING
  */
  --gap-half: 4px;
  --gap: 8px;
  --gap-x2: 16px;
  --gap-x3: 24px;
  --gap-x4: 32px;
  --gap-x5: 40px;
  --gap-x6: 48px;
  --gap-x7: 56px;
  --gap-x8: 64px;
  --gap-x9: 72px;
  --gap-x10: 80px;

  /*
    BORDER RADIUS
  */
  --border-radius-sm: 2px;
  --border-radius: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 16px;
  --border-radius-3xl: 24px;
  --border-radius-full: 9999px;

  /*
    BORDERS
  */
  --border-default: 1px solid var(--colors-neutral-100);
  --border-strong: 2px solid var(--colors-neutral-100); /* Focused, selected states */
  --border-muted: 1px solid var(--colors-neutral-50); /* Light outlines or separators */
  --border-focused: 2px solid var(--colors-primary-500); /* Focus ring */

  /*
    SHADOWS
  */
  --box-shadow-color: hsla(from var(--colors-neutral-900) h s l / 0.07);

  /*
    BUTTONS
  */
  --btn-primary: var(--colors-primary-500);
  --btn-primary-hover: var(--colors-primary-700);
  --btn-primary-focus: var(--colors-primary-700);
  --btn-primary-border: var(--colors-primary-500);
  --btn-primary-border-hover: var(--colors-primary-500);
  --btn-primary-border-focus: var(--colors-primary-500);
  --btn-primary-text: var(--white);
  --btn-primary-text-hover: var(--white);
  --btn-primary-text-focus: var(--white);

  --btn-secondary: var(--white);
  --btn-secondary-hover: var(--colors-primary-50);
  --btn-secondary-focus: var(--colors-primary-50);
  --btn-secondary-border: var(--colors-primary-700);
  --btn-secondary-border-focus: var(--colors-primary-700);
  --btn-secondary-border-hover: var(--colors-primary-700);
  --btn-secondary-text: var(--colors-primary-700);
  --btn-secondary-text-focus: var(--colors-primary-700);
  --btn-secondary-text-hover: var(--colors-primary-700);

  --btn-tertiary: var(--colors-primary-500);
  --btn-tertiary-hover: var(--colors-primary-700);
  --btn-tertiary-focus: var(--colors-primary-700);
  --btn-tertiary-border: var(--colors-primary-500);
  --btn-tertiary-border-hover: var(--colors-primary-500);
  --btn-tertiary-border-focus: var(--colors-primary-500);
  --btn-tertiary-text: var(--white);
  --btn-tertiary-text-hover: var(--white);
  --btn-tertiary-text-focus: var(--white);

  --btn-danger: var(--colors-error-700);
  --btn-danger-hover: var(--colors-error-900);
  --btn-danger-focus: var(--colors-error-900);
  --btn-danger-border: var(--colors-error-700);
  --btn-danger-text: var(--white);

  --btn-warning: var(--colors-warning-800);
  --btn-warning-hover: var(--colors-warning-900);
  --btn-warning-focus: var(--colors-warning-900);
  --btn-warning-border: var(--colors-warning-800);
  --btn-warning-text: var(--white);

  --btn-success: var(--colors-success-700);
  --btn-success-hover: var(--colors-success-900);
  --btn-success-focus: var(--colors-success-900);
  --btn-success-border: var(--colors-success-700);
  --btn-success-text: var(--white);

  --btn-radius: var(--border-radius-lg);

  /*
    FORMS
  */
  --input-border: var(--colors-neutral-300);
  --input-placeholder: var(--colors-neutral-500);
  --input-text: var(--colors-neutral-900);

  /*
    HEADER
  */
  --header-height: 80px;
  --header-logo-max-height: 36px;
  --header-logo-mobile-max-height: 36px;

  /*
    TYPOGRAPHY
  */
  --font-family: 'Inter Variable', sans-serif;
  --text-color: var(--colors-neutral-900);

  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-display-xs: 1.5rem;
  --font-display-sm: 1.875rem;
  --font-display-md: 2.25rem;
  --font-display-lg: 3rem;
  --font-display-xl: 3.75rem;
  --font-display-2xl: 4.5rem;

  --line-height-xs: 1.125rem;
  --line-height-sm: 1.25rem;
  --line-height-md: 1.5rem;
  --line-height-lg: 1.75rem;
  --line-height-xl: 1.875rem;
  --line-height-display-xs: 2rem;
  --line-height-display-sm: 2.375rem;
  --line-height-display-md: 2.75rem;
  --line-height-display-lg: 3.75rem;
  --line-height-display-xl: 4.5rem;
  --line-height-display-2xl: 5.625rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /*
    TOOLTIP
  */
  --tooltip-background: #333;
  --tooltip-color: var(--white);
  --tooltip-padding: var(--gap-half) var(--gap);
  --tooltip-border-radius: var(--gap-half);
  --tooltip-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --tooltip-font-size: var(--text-sm);
  --tooltip-max-width: 24rem;
  --tooltip-offset: var(--gap-half);
  --tooltip-arrow-size: var(--gap);
  --tooltip-z-index: 1000;

  /*
    CARD
  */
  --card-border-radius: var(--border-radius-lg);
  --card-box-shadow: 0 1px 3px 0 var(--box-shadow-color);
}