/*--------------------------------------------------------------
>>> VARIABLES CSS - TechGuru Theme
----------------------------------------------------------------
# Color Variables
# Typography Variables
# Layout Variables
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Color Variables
--------------------------------------------------------------*/
:root {
  /* Paleta de Cores Principal */
  --color-yellow: #fab40c;
  --color-gray: #6b6b6b;
  --color-white: #ffffff;

  /* Variáveis RGB para transparências */
  --color-yellow-rgb: 250, 180, 12;
  --color-gray-rgb: 79, 79, 79;
  --color-white-rgb: 255, 255, 255;
  --color-black: rgb(29, 29, 29);
  --color-black-rgb: 63, 63, 63;
  /* Alias para compatibilidade com o tema existente */
  --techguru-base: var(--color-yellow);
  --techguru-base-rgb: var(--color-yellow-rgb);
  --techguru-gray: var(--color-gray);
  --techguru-gray-rgb: var(--color-gray-rgb);
  --techguru-black: var(--color-black);
  --techguru-black-rgb: var(--color-black-rgb);
  --techguru-white: var(--color-white);
  --techguru-white-rgb: var(--color-white-rgb);

  /* Variações de opacidade para uso comum */
  --color-yellow-10: rgba(var(--color-yellow-rgb), 0.1);
  --color-yellow-20: rgba(var(--color-yellow-rgb), 0.2);
  --color-yellow-30: rgba(var(--color-yellow-rgb), 0.3);
  --color-yellow-40: rgba(var(--color-yellow-rgb), 0.4);
  --color-yellow-50: rgba(var(--color-yellow-rgb), 0.5);
  --color-yellow-70: rgba(var(--color-yellow-rgb), 0.7);
  --color-yellow-80: rgba(var(--color-yellow-rgb), 0.8);
  --color-yellow-90: rgba(var(--color-yellow-rgb), 0.9);

  --color-gray-10: rgba(var(--color-gray-rgb), 0.1);
  --color-gray-20: rgba(var(--color-gray-rgb), 0.2);
  --color-gray-30: rgba(var(--color-gray-rgb), 0.3);
  --color-gray-40: rgba(var(--color-gray-rgb), 0.4);
  --color-gray-50: rgba(var(--color-gray-rgb), 0.5);
  --color-gray-70: rgba(var(--color-gray-rgb), 0.7);
  --color-gray-80: rgba(var(--color-gray-rgb), 0.8);
  --color-gray-90: rgba(var(--color-gray-rgb), 0.9);

  --color-white-10: rgba(var(--color-white-rgb), 0.1);
  --color-white-20: rgba(var(--color-white-rgb), 0.2);
  --color-white-30: rgba(var(--color-white-rgb), 0.3);
  --color-white-40: rgba(var(--color-white-rgb), 0.4);
  --color-white-50: rgba(var(--color-white-rgb), 0.5);
  --color-white-70: rgba(var(--color-white-rgb), 0.7);
  --color-white-80: rgba(var(--color-white-rgb), 0.8);
  --color-white-90: rgba(var(--color-white-rgb), 0.9);
}

/*--------------------------------------------------------------
# Typography Variables
--------------------------------------------------------------*/
:root {
  --techguru-font: "Space Grotesk", sans-serif;
  --techguru-font-two: "Marcellus", serif;
}

/*--------------------------------------------------------------
# Layout Variables
--------------------------------------------------------------*/
:root {
  /* Espaçamentos */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;

  /* Border Radius */
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 15px;
  --border-radius-circle: 50%;

  /* Sombras */
  --shadow-light: 0px 10px 60px 0px rgba(var(--color-gray-rgb), 0.1);
  --shadow-medium: 0px 10px 60px 0px rgba(var(--color-gray-rgb), 0.2);
  --shadow-dark: 0px 10px 60px 0px rgba(var(--color-gray-rgb), 0.3);

  /* Transições */
  --transition-fast: 200ms ease;
  --transition-normal: 400ms ease;
  --transition-slow: 600ms ease;

  /* Gradientes Criativos Predefinidos */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-yellow) 0%,
    var(--color-gray) 50%,
    var(--color-yellow) 100%
  );
  --gradient-secondary: linear-gradient(
    270deg,
    var(--color-yellow) 0%,
    var(--color-white) 50%,
    var(--color-gray) 100%
  );
  --gradient-tertiary: radial-gradient(
    circle,
    var(--color-white) 0%,
    var(--color-yellow) 30%,
    var(--color-gray) 100%
  );
  --gradient-diagonal: linear-gradient(
    45deg,
    var(--color-yellow),
    var(--color-white),
    var(--color-gray)
  );
  --gradient-reverse: linear-gradient(
    -45deg,
    var(--color-gray) 0%,
    var(--color-white) 30%,
    var(--color-yellow) 100%
  );
  --gradient-radial-soft: radial-gradient(
    ellipse,
    var(--color-yellow-50) 0%,
    var(--color-gray-20) 70%,
    transparent 100%
  );
  --gradient-vertical: linear-gradient(
    180deg,
    var(--color-yellow) 0%,
    var(--color-gray) 50%,
    var(--color-white) 100%
  );
  --gradient-horizontal: linear-gradient(
    90deg,
    var(--color-gray) 0%,
    var(--color-yellow) 50%,
    var(--color-white) 100%
  );
  --gradient-shine: linear-gradient(
    135deg,
    var(--color-white) 0%,
    var(--color-yellow) 20%,
    var(--color-gray) 40%,
    var(--color-yellow) 60%,
    var(--color-white) 100%
  );
  --gradient-soft-glow: radial-gradient(
    50% 50% at 50% 50%,
    var(--color-yellow-30) 0%,
    var(--color-gray-10) 70%,
    transparent 100%
  );
}