@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Italic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Oswald";
  src: url("../fonts/Oswald-Variable.ttf") format("truetype");
  font-weight: 200 700; /* Nota: Oswald variable suele ir de 200 a 700 */
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --font-main: "Inter", sans-serif;
  --font-secondary: "Oswald", sans-serif;

  /* Semantic weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Colors */
  --color-primary: oklch(42.318% 0.07938 244.061);
  --color-text: oklch(49.904% 0.01953 251.075);
  --color-accent: oklch(93% 0.02 240);
  --color-foreground: oklch(22% 0.02 250);
  --color-background: oklch(100% 0 0);
  --color-primary-glow: oklch(55% 0.13 240);
  --color-steel: oklch(32% 0.01 250);
  --color-steel-foreground: oklab(0.98 0 0 / 0.7);
  --color-surface: oklch(97% 0.005 250);
  --color-border: oklch(90% 0.01 250);
  --color-primary-foreground: oklch(99% 0 0);
  --color-muted-foreground: oklch(50% 0.02 250);
  --color-input: oklch(90% 0.01 250);

  /* Font sizes */
  --text-base: clamp(0.875rem, 0.8125rem + 0.39vw, 1.125rem);

  /* Line heights */
  --leading-base: 1.6;

  /* Spacing Scale */
  --space-unit: 0.25rem;
  --space-1: var(--space-unit); /* 0.25rem */
  --space-2: calc(var(--space-unit) * 2); /* 0.5rem */
  --space-3: calc(var(--space-unit) * 3); /* 0.75rem */
  --space-4: calc(var(--space-unit) * 4); /* 1rem */
  --space-5: calc(var(--space-unit) * 5); /* 1.25rem */
  --space-6: calc(var(--space-unit) * 6); /* 1.5rem */
  --space-8: calc(var(--space-unit) * 8); /* 2rem */
  --space-9: calc(var(--space-unit) * 9); /* 2.25rem */
  --space-10: calc(var(--space-unit) * 10); /* 2.5rem */
  --space-12: calc(var(--space-unit) * 12); /* 3rem */
  --space-14: calc(var(--space-unit) * 14); /* 3.5rem */
  --space-16: calc(var(--space-unit) * 16); /* 4rem */
  --space-24: calc(var(--space-unit) * 24); /* 6rem */
  --space-32: calc(var(--space-unit) * 32); /* 8rem */

  /* Phtsics */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-base: 0.3s;
  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-bounce: 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Containers */
  --container-7xl: 80rem;

  /* Borders */
  --border: oklch(90% 0.01 250);

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;

  /* Shadows */
  --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-card: 0 4px 20px -4px oklch(22% 0.02 250 / 0.12);
  --shadow-elegant: 0 20px 60px -20px oklch(42% 0.08 245 / 0.35);

  /* Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-glow) 100%
  );
  --gradient-steel: linear-gradient(
    180deg,
    oklch(25% 0.01 250) 0%,
    oklch(18% 0.02 250) 100%
  );
  --gradient-hero: linear-gradient(
    135deg,
    oklch(18% 0.02 250 / 0.92) 0%,
    oklch(32% 0.06 245 / 0.85) 100%
  );
  --graient-bright-hero: radial-gradient(circle at 30%, #0079b34d, #0000 50%);

  --gradient-cta: radial-gradient(
    circle at 70% 30%,
    color(xyz 0.15 0.17 0.462 / 0.4),
    #0000 60%
  );
}

/* Animations */
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}