@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Istok+Web:wght@400&family=Poppins:wght@400;600&family=Outfit:wght@400;700&display=swap');

html.index {
  scroll-behavior: smooth;
  background-color: var(--color-bg-main) !important;
}


:root {
  /* Primary palette */ 
  --color-primary: #f9c441;      /* Primary - Existing gold, creativity, warmth */
  --color-teal: #00B8A9;         /* Secondary - Technical, modern, clarity */
  --color-purple: #8A4FFF;       /* Accent 1 - Depth, innovation, quality */
  --color-coral: #FF6B6B;   

  /* Standard font colors */
  --color-dark: #191919;
  --color-blue: #191919;
  --color-light: #e1e1e1;
  --color-text: #e1e1e1;
  --color-text-secondary: #ccc;

  /* iframe elements */
  --iframe-container-bg: rgb(23, 23, 24, 0.2);
  --iframe-item-bg: rgba(40, 40, 50, 0.6);
  --iframe-item-bg-dark: rgba(25, 25, 35, 0.8); 

  
  /* Background elements */
  --color-bg-dark: rgba(25, 25, 35, 0.95);
  --color-bg-darker: rgba(20, 20, 20, 0.95);
  --color-menu-bar: rgb(23, 23, 24);
  --color-bg-main: rgba(40, 40, 50, 1);
  --color-bg-container: rgba(40, 40, 50, 1);
  
  /* Transparency levels */
  --transparency-subtle: 0.3;
  --transparency-medium: 0.5;
  --transparency-high: 0.8;
  
  /* Effects */  --blur-effect: blur(10px);
  --transition-standard: all 0.3s ease;
  /* Font families */
  --font-primary: 'Istok Web', Arial, sans-serif;
  --font-headings: 'Inter', Arial, sans-serif;
  --font-ui: 'Poppins', Arial, sans-serif;
  --font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
  --font-outfit: 'Outfit', sans-serif; /* Added Outfit as a variable */
  --font-discover: Arial, sans-serif; /* Arial font for discover-style headings (blog title, discover title) */
  
  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Font sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Letter spacing */
  --letter-spacing-tight: -0.02em; /* -2% for body text */
  --letter-spacing-buttons: 0.03em; /* 3% for buttons */
  --letter-spacing-normal: 0;

  /* Add code block specific colors */
  --color-code-bg: rgba(22, 22, 30, 0.9); /* Dark navy background for code */
  --color-code-border: #f9c441;           /* Gold border */
  --color-code-text: #e1e1e1;             /* Light text */
  --color-code-comment: #888;             /* Muted color for comments */
  --color-code-header-bg: rgba(15, 15, 23, 0.95); /* Darker header */

  /* Tag colors */
  --tag-color-red: #FF5252;
  --tag-color-pink: #FF4081;
  --tag-color-purple: #E040FB;
  --tag-color-deep-purple: #7C4DFF;
  --tag-color-indigo: #536DFE;
  --tag-color-blue: #448AFF;
  
  /* Gradient themes */
  --gradient-rainbow: linear-gradient(
    to right,
    var(--tag-color-red) 0%,
    var(--tag-color-pink) 33%,
    var(--tag-color-purple) 66%,
    var(--tag-color-deep-purple) 100%
  );
  
  /* Text gradient properties for easy reuse */
  --text-gradient-props: transparent;
  --text-gradient-bg-clip: text;
  --text-gradient-webkit-bg-clip: text;
}

/* Global typography implementations */

/* Base text styling */
body {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

/* Heading styles with Inter Bold at 150% */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-size: 150%; /* Makes headings 150% of their normal size */
  margin-bottom: 0.75em;
  margin-top: 1.5em;
}

/* Secondary heading style with Arial */
.heading-alt {
  font-family: Arial, sans-serif;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-size: 150%;
  margin-bottom: 0.75em;
  margin-top: 1.5em;
}

/* Specific variants */
h1.arial, h2.arial, h3.arial, h4.arial, h5.arial, h6.arial {
  font-family: Arial, sans-serif;
}

/* Button styling with Poppins Semibold, uppercase, 3% spacing */
button,
.button,
[type="button"],
[type="submit"],
.btn {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-buttons);
  line-height: 1;
}

/* ============================================
   REUSABLE BUTTON COMPONENTS
   ============================================ */

/* Base button styling - shared properties */
.btn-base {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none !important;
  font-weight: bold;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-buttons);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  text-align: center;
  line-height: 1.2;
  user-select: none;
}

/* Primary button - Gold theme */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: #e6b037;
  border-color: #e6b037;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 196, 65, 0.3);
}

/* Secondary button - Dark with gold border */
.btn-secondary {
  background: #333;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background: #444;
  color: #ffdb70;
  border-color: #ffdb70;
  transform: translateY(-2px);
}

/* Outline button - Transparent with border */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-dark);
}

/* Ghost button - Minimal styling */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
  text-decoration: underline !important;
}

.btn-ghost:hover {
  color: var(--color-primary);
  text-decoration: none !important;
}

/* Teal accent button */
.btn-teal {
  background: var(--color-teal);
  color: white;
  border-color: var(--color-teal);
}

.btn-teal:hover {
  background: #009688;
  border-color: #009688;
  transform: translateY(-2px);
}

/* Purple accent button */
.btn-purple {
  background: var(--color-purple);
  color: white;
  border-color: var(--color-purple);
}

.btn-purple:hover {
  background: #7c45e6;
  border-color: #7c45e6;
  transform: translateY(-2px);
}

/* Button sizes */
.btn-sm {
  padding: 6px 12px;
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: 14px 28px;
  font-size: var(--font-size-md);
}

.btn-xl {
  padding: 18px 36px;
  font-size: var(--font-size-lg);
}

/* Button states */
.btn-disabled,
.btn-base:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-disabled:hover,
.btn-base:disabled:hover {
  transform: none !important;
}

/* Full width button */
.btn-full {
  width: 100%;
  display: block;
}

/* Contact button - specific styling for contact forms */
.contact-button {
  background: #333;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none !important;
  font-weight: bold;
  font-family: var(--font-ui);
  transition: all 0.3s ease;
  cursor: pointer;
}

.contact-button:hover {
  background: #444;
  color: #ffdb70;
  border-color: #ffdb70;
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* ============================================
   BUTTON COMBINATIONS - Easy to use classes
   ============================================ */

/* Most common combinations */
.btn-primary-base { 
  /* Combines .btn-base and .btn-primary */
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none !important;
  font-weight: bold;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-buttons);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid var(--color-primary);
  text-align: center;
  line-height: 1.2;
  user-select: none;
  background: var(--color-primary);
  color: var(--color-dark);
}

.btn-primary-base:hover {
  background: #e6b037;
  border-color: #e6b037;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 196, 65, 0.3);
}

.btn-secondary-base { 
  /* Combines .btn-base and .btn-secondary */
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none !important;
  font-weight: bold;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-buttons);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid var(--color-primary);
  text-align: center;
  line-height: 1.2;
  user-select: none;
  background: #333;
  color: var(--color-primary);
}

.btn-secondary-base:hover {
  background: #444;
  color: #ffdb70;
  border-color: #ffdb70;
  transform: translateY(-2px);
}

/* Add responsive button adjustments */
@media (max-width: 768px) {
  .btn-base {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
  }
  
  .btn-lg {
    padding: 12px 24px;
    font-size: var(--font-size-base);
  }
  
  .btn-xl {
    padding: 14px 28px;
    font-size: var(--font-size-md);
  }
}

/* Add a reusable gradient text class to easily apply the effect */
.gradient-text {
  background: var(--gradient-rainbow);
  -webkit-background-clip: var(--text-gradient-webkit-bg-clip);
  background-clip: var(--text-gradient-bg-clip);
  color: var(--text-gradient-props);
}