/* @import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"; */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

@font-face {
  font-family: "Aeonik Pro";
  src: url("../../fonts/Aeonik_Pro_Light.eot");
  src:
    url("../../fonts/Aeonik_Pro_Light.eot?#iefix") format("embedded-opentype"),
    url("../../fonts/Aeonik_Pro_Light.woff2") format("woff2"),
    url("../../fonts/Aeonik_Pro_Light.woff") format("woff"),
    url("../../fonts/Aeonik_Pro_Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("../../fonts/Aeonik_Pro_Medium.eot");
  src:
    url("../../fonts/Aeonik_Pro_Medium.eot?#iefix") format("embedded-opentype"),
    url("../../fonts/Aeonik_Pro_Medium.woff2") format("woff2"),
    url("../../fonts/Aeonik_Pro_Medium.woff") format("woff"),
    url("../../fonts/Aeonik_Pro_Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("../../fonts/Aeonik_Pro_Bold.eot");
  src:
    url("../../fonts/Aeonik_Pro_Bold.eot?#iefix") format("embedded-opentype"),
    url("../../fonts/Aeonik_Pro_Bold.woff2") format("woff2"),
    url("../../fonts/Aeonik_Pro_Bold.woff") format("woff"),
    url("../../fonts/Aeonik_Pro_Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html {
  font-size: 16px;
}
:root {
  --white: #fff;

  --neutral-50: #fbf9fa;
  --neutral-100: #f3f3f1;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #ced4da;
  --neutral-500: #adb5bd;
  --neutral-600: #6c757d;
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;
  --neutral-950: #030712;

  /* Default Theme: Indigo */
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;
  --primary-950: #2e1065;

  --primary-rgb: 139, 92, 246;
  --primary: var(--primary-500);
  --primary-lifted: var(--primary-600);
  --primary-accented: var(--primary-700);

  --font-heading: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;

  --font-family-sans-serif: var(--font-body);
  --font-family-monospace: var(--font-heading);



  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-base: var(--text-sm);     /* changed */
  --font-small: var(--text-xs);
  --font-label: var(--text-sm);
  --font-input: var(--text-md);
  --font-button: var(--text-sm);
  --font-price: var(--text-xl);

  --accent: #ccff00;
  --accent-light: #0f2121;
  --accent-dark: #132828;
  --accent-rgb: 204, 255, 0;

  --secondary: var(--neutral-500);
  --secondary-lifted: var(--neutral-600);
  --secondary-accented: var(--neutral-700);
  --heading-color: var(--neutral-900);

  --success: #28a745;
  --success-lifted: #008236;
  --success-accented: #016630;
  --success-rgb: 40, 167, 69;

  --info: #155dfc;
  --info-lifted: #1447e6;
  --info-accented: #193cb8;
  --info-rgb: 21, 93, 252;

  --notice: #7f22fe;
  --notice-lifted: #7008e7;
  --notice-accented: #5d0ec0;

  --warning: #ff702f;
  --warning-lifted: #ff5f15;
  --warning-accented: #ff4d00;
  --warning-rgb: 255, 193, 7;

  --error: #dc3545;
  --error-lifted: #c10007;
  --error-accented: #9f0712;
  --danger-rgb: 220, 53, 69;

  --text-inverted: var(--white);
  --text-muted: var(--neutral-500);
  --text-lifted: var(--neutral-600);
  --text-accented: var(--neutral-600);
  --text: var(--neutral-700);

  --border-muted: var(--neutral-200);
  --border: var(--neutral-300);
  --border-lifted: var(--neutral-400);
  --border-accented: var(--neutral-600);

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

  --rounding-sm: 0.375rem;
  --rounding-md: 1rem;
  --rounding-lg: 2rem;
  --rounding-pill: 50px;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --card-shadow: rgba(149, 157, 165, 0.2) 0px 4px 6px 0px;

  /* Order Form Component Variables */

  /* Billing Cycle Radio Cards */
  --hm-cycle-card-bg: var(--white);
  --hm-cycle-card-border: var(--border-muted);
  --hm-cycle-card-radius: var(--rounding-md);
  --hm-cycle-card-gap: 16px;
  --hm-cycle-card-padding-v: 18px;
  --hm-cycle-card-padding-h: 16px;
  --hm-cycle-card-padding-bottom: 52px;
  --hm-cycle-active-bg: var(--primary);
  --hm-cycle-active-border: var(--primary);
  --hm-cycle-icon-bg: var(--neutral-200);
  --hm-cycle-icon-color: var(--neutral-600);
  --hm-cycle-icon-radius: var(--rounding-sm);
  --hm-cycle-icon-size: 44px;
  --hm-cycle-active-icon-bg: rgba(255, 255, 255, 0.15);
  --hm-cycle-active-icon-color: var(--white);
  --hm-cycle-label-size: var(--text-sm);
  --hm-cycle-label-color: var(--text-accented);
  --hm-cycle-active-label-color: var(--white);
  --hm-cycle-price-size: var(--text-md);
  --hm-cycle-price-weight: var(--font-weight-semibold);
  --hm-cycle-price-color: var(--neutral-950);
  --hm-cycle-active-price-color: var(--white);
  --hm-cycle-popular-bg: var(--warning);
  --hm-cycle-popular-text: var(--white);
  --hm-cycle-popular-size: var(--text-xs);
  --hm-cycle-check-inactive-bg: var(--neutral-300);
  --hm-cycle-check-bg: var(--accent);
  --hm-cycle-check-color: var(--neutral-900);
  --hm-cycle-check-size: 24px;

  /* Configure Server Box */
  --hm-server-box-bg: var(--white);
  --hm-server-box-radius: var(--rounding-md);
  --hm-server-box-padding: 28px;
  --hm-server-box-shadow: var(--shadow-sm);

  /* Configurable Options */
  --hm-co-gap: 16px;
  --hm-co-card-bg: var(--white);
  --hm-co-card-border: var(--border-muted);
  --hm-co-card-radius: var(--rounding-sm);
  --hm-co-card-padding: 12px 14px;
  --hm-co-card-active-bg: var(--white);
  --hm-co-card-active-border: var(--primary);
  --hm-co-icon-size: 40px;
  --hm-co-icon-bg: var(--primary-50);
  --hm-co-icon-color: var(--primary);
  --hm-co-icon-radius: var(--rounding-sm);
  --hm-co-icon-font-size: 17px;
  --hm-co-check-size: 20px;
  --hm-co-check-border: var(--border-lifted);
  --hm-co-check-active-bg: var(--primary);
  --hm-co-check-active-border: var(--primary);

  /* Toggle Switch */
  --hm-toggle-track-w: 44px;
  --hm-toggle-track-h: 24px;
  --hm-toggle-track-off: var(--neutral-300);
  --hm-toggle-track-on: var(--primary);
  --hm-toggle-thumb: var(--white);
  --hm-toggle-radius: var(--rounding-lg);

  /* Available Addons Accordion */
  --hm-addon-radius: var(--rounding-sm);
  --hm-addon-border: var(--border-muted);
  --hm-addon-bg: var(--white);
  --hm-addon-active-border: var(--notice);
  --hm-addon-option-active-bg: var(--primary-50);
  --hm-addon-icon-bg: var(--primary-100);
  --hm-addon-icon-color: var(--notice);

  /* Order Summary */
  --hm-summary-bg: var(--white);
  --hm-summary-radius: var(--rounding-md);
  --hm-summary-padding: 24px;
  --hm-summary-divider: var(--border-muted);
  --hm-summary-today-color: var(--error);
  --hm-checkout-bg: var(--primary);
  --hm-checkout-radius: var(--rounding-pill);

  /* Sub-option Group Selector Cards */
  --hm-sg-card-bg: var(--white);
  --hm-sg-card-border: var(--border-muted);
  --hm-sg-card-radius: var(--rounding-md);
  --hm-sg-card-padding: 20px;
  --hm-sg-card-gap: 16px;
  --hm-sg-card-active-border: var(--primary);
  --hm-sg-card-hover-border: var(--primary-300);
  --hm-sg-radio-size: 20px;
  --hm-sg-radio-active-bg: var(--primary);
  --hm-sg-img-size: 72px;

  /* Payment Gateway Cards */
  --hm-gw-card-bg: var(--white);
  --hm-gw-card-border: var(--border-muted);
  --hm-gw-card-radius: var(--rounding-md);
  --hm-gw-card-gap: 14px;
  --hm-gw-card-padding: 16px;
  --hm-gw-active-border: var(--primary);
  --hm-gw-icon-size: 60px;
  --hm-gw-icon-radius: var(--rounding-sm);
  --hm-gw-icon-bg: var(--neutral-100);
  --hm-gw-icon-color: var(--neutral-500);
  --hm-gw-name-size: var(--text-sm);
  --hm-gw-name-color: var(--text);
  --hm-gw-check-size: 18px;
  --hm-gw-check-inactive-bg: var(--neutral-300);
  --hm-gw-check-inactive-border: var(--neutral-400);
  --hm-gw-check-active-bg: var(--primary);
  --hm-gw-check-active-color: var(--white);

  /* Domain Addon Cards */
  --hm-da-card-bg: var(--white);
  --hm-da-card-border: var(--border-muted);
  --hm-da-card-radius: var(--rounding-md);
  --hm-da-card-active-bg: var(--primary);
  --hm-da-card-active-border: var(--primary);
  --hm-da-icon-bg: var(--neutral-200);
  --hm-da-icon-color: var(--neutral-600);
  --hm-da-icon-active-bg: rgba(255, 255, 255, 0.15);
  --hm-da-icon-active-color: var(--white);
  --hm-da-check-bg: var(--accent);
  --hm-da-check-color: var(--primary);
  --hm-da-pill-bg: var(--neutral-100);
  --hm-da-pill-radius: var(--rounding-sm);
  --hm-da-pill-color: var(--text-accented);
  --hm-da-pill-ok-color: var(--success);
  --hm-da-pill-warn-color: var(--error-lifted);
}

/* Theme 01: Green */
.theme-green {
  --primary-50: #f0fdf4;
  --primary-100: #dcfce7;
  --primary-200: #bbf7d0;
  --primary-300: #86efac;
  --primary-400: #4ade80;
  --primary-500: #22c55e;
  --primary-600: #16a34a;
  --primary-700: #15803d;
  --primary-800: #166534;
  --primary-900: #14532d;
  --primary-950: #052e16;

  --primary-rgb: 34, 197, 94;
  --primary: var(--primary-500);
  --primary-lifted: var(--primary-600);
  --primary-accented: var(--primary-700);

  --font-heading: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;
}

/* Theme 02: Blue */
.theme-blue {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;

  --primary-rgb: 59, 130, 246;
  --primary: var(--primary-500);
  --primary-lifted: var(--primary-600);
  --primary-accented: var(--primary-700);

 --font-heading: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;
}

/* Theme 03: Emerald */
.theme-emerald {
  --primary-50: #ecfdf5;
  --primary-100: #d1fae5;
  --primary-200: #a7f3d0;
  --primary-300: #6ee7b7;
  --primary-400: #34d399;
  --primary-500: #10b981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-800: #065f46;
  --primary-900: #064e3b;
  --primary-950: #022c22;

  --primary-rgb: 16, 185, 129;
  --primary: var(--primary-500);
  --primary-lifted: var(--primary-600);
  --primary-accented: var(--primary-700);

  --font-heading: "Outfit", sans-serif;
  --font-body: "Manrope", sans-serif;
}

/* Theme 04: Lime */
.theme-lime {
 --primary-50: #f7fee7;
  --primary-100: #ecfccb;
  --primary-200: #d9f99d;
  --primary-300: #bef264;
  --primary-400: #a3e635;
  --primary-500: #84cc16;
  --primary-600: #65a30d;
  --primary-700: #4d7c0f;
  --primary-800: #3f6212;
  --primary-900: #365314;
  --primary-950: #1a2e05;

  --primary-rgb: 132, 204, 22;
  --primary: var(--primary-500);
  --primary-lifted: var(--primary-600);
  --primary-accented: var(--primary-700);

  --font-heading: "Inter", sans-serif;
  --font-body: "Roboto", sans-serif;
}

.theme-lime-green {
  --primary-50:  #f6fde8;
  --primary-100: #eafad1;
  --primary-200: #d4f5a3;
  --primary-300: #b9ee6d;
  --primary-400: #9de33a;
  --primary-500: #7cc51a;
  --primary-600: #5da302; /* your base color */
  --primary-700: #4a8402;
  --primary-800: #376402;
  --primary-900: #254402;
  --primary-950: #172b01;

  --primary-rgb: 93, 163, 2;

  /* UI Mapping */
  --primary: var(--primary-600);
  --primary-lifted: var(--primary-700);
  --primary-accented: var(--primary-800);

  
  --font-heading: "Inter", sans-serif;
  --font-body: "Roboto", sans-serif;
}


/* Theme 05: Orange */
.theme-orange {
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --primary-200: #fed7aa;
  --primary-300: #fdba74;
  --primary-400: #fb923c;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary-900: #7c2d12;
  --primary-950: #431407;

  --primary-rgb: 249, 115, 22;
  --primary: var(--primary-500);
  --primary-lifted: var(--primary-600);
  --primary-accented: var(--primary-700);

  --font-heading: "Manrope", sans-serif;
  --font-body: "Poppins", sans-serif;
}

/* Theme 06: Violet */
.theme-violet {
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --primary-200: #ddd6fe;
  --primary-300: #c4b5fd;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --primary-700: #6d28d9;
  --primary-800: #5b21b6;
  --primary-900: #4c1d95;
  --primary-950: #2e1065;

  --primary-rgb: 139, 92, 246;
  --primary: var(--primary-500);
  --primary-lifted: var(--primary-600);
  --primary-accented: var(--primary-700);

 --font-heading: "Outfit", sans-serif;
  --font-body: "Inter", sans-serif;
}