/* Graphik Font - Local Files */
@font-face {
  font-family: "Graphik";
  src: url("/font/Graphik/Graphik-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/font/Graphik/Graphik-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/font/Graphik/Graphik-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/font/Graphik/Graphik-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("/font/Graphik/Graphik-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Tiempos Fine Font - Local Files */
@font-face {
  font-family: "Tiempos Fine";
  src: url("/font/Tiempos Fine/TiemposFine-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Make CSS variables animatable using @property */
@property --color-background {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.2014 0.0046 196.79);
}

@property --color-foreground {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.9026 0.0056 183.02);
}

@property --color-muted {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.3869 0.0105 196.73);
}

@property --color-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #00CCBA;
}

@property --color-accent-foreground {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.2014 0.0046 196.79);
}

@property --color-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.49 0.24 286);
}

@property --color-primary-foreground {
  syntax: "<color>";
  inherits: true;
  initial-value: oklch(0.98 0 0);
}

/* BrazilJS Theme Variables */
:root {
  --color-braziljs-00: oklch(0.9784 0.0011 197.14);
  --color-braziljs-50: oklch(0.9491 0.0043 197.0);
  --color-braziljs-100: oklch(0.9026 0.0056 183.02);
  --color-braziljs-200: oklch(0.8439 0.0102 181.36);
  --color-braziljs-300: oklch(0.7592 0.0148 185.83);
  --color-braziljs-400: oklch(0.6812 0.0206 188.58);
  --color-braziljs-500: oklch(0.5991 0.0247 186.02);
  --color-braziljs-600: oklch(0.5153 0.0181 196.6);
  --color-braziljs-700: oklch(0.4452 0.0114 196.75);
  --color-braziljs-800: oklch(0.3869 0.0105 196.73);
  --color-braziljs-900: oklch(0.2873 0.0085 196.69);
  --color-braziljs-950: oklch(0.2014 0.0046 196.79);
  --color-braziljs-primary: #00CCBA;
  --color-braziljs-primary-foreground: oklch(0.30 0.02 191);
  --color-braziljs-purple: oklch(0.49 0.24 286);
  --color-braziljs-purple-foreground: oklch(0.98 0 0);

  /* Semantic tokens - Dark theme defaults */
  --color-background: oklch(0.2014 0.0046 196.79);
  --color-foreground: oklch(0.9026 0.0056 183.02);
  --color-muted: oklch(0.3869 0.0105 196.73);
  --color-accent: #00CCBA;
  --color-accent-foreground: oklch(0.2014 0.0046 196.79);
  --color-primary: var(--color-braziljs-purple);
  --color-primary-foreground: var(--color-braziljs-purple-foreground);
}

/* Apply theme to html element with smooth transitions */
html {
  transition:
    --color-background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    --color-foreground 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    --color-muted 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    --color-accent 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    --color-accent-foreground 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    --color-primary 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    --color-primary-foreground 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  font-family:
    "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family:
    "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

*, *::before, *::after {
  font-family:
    "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Locomotive Scroll container fixes */
[data-scroll-container] {
  min-height: 100vh;
}

[data-scroll-section] {
  will-change: transform;
}

/* Dark theme - references to braziljs tokens */
[data-theme="dark"] {
  --color-background: var(--color-braziljs-950);
  --color-foreground: var(--color-braziljs-100);
  --color-muted: var(--color-braziljs-800);
  --color-accent: var(--color-braziljs-primary);
  --color-accent-foreground: var(--color-braziljs-950);
  --color-primary: var(--color-braziljs-purple);
  --color-primary-foreground: var(--color-braziljs-purple-foreground);
}

/* Green theme */
[data-theme="green"] {
  --color-background: var(--color-braziljs-primary);
  --color-foreground: var(--color-braziljs-950);
  --color-muted: var(--color-braziljs-800);
  --color-accent: var(--color-braziljs-950);
  --color-accent-foreground: var(--color-braziljs-100);
  --color-primary: var(--color-braziljs-purple);
  --color-primary-foreground: var(--color-braziljs-purple-foreground);
}

/* Light theme */
[data-theme="light"] {
  --color-background: var(--color-braziljs-00);
  --color-foreground: var(--color-braziljs-950);
  --color-muted: var(--color-braziljs-800);
  --color-accent: var(--color-braziljs-primary);
  --color-accent-foreground: var(--color-braziljs-950);
  --color-primary: var(--color-braziljs-purple);
  --color-primary-foreground: var(--color-braziljs-purple-foreground);
}

/* Font utility classes */
.font-tiempos {
  font-family: "Tiempos Fine", Georgia, serif !important;
}

.font-graphik {
  font-family: "Graphik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/** Remove default styles from input[type=number] */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}

/** Prevent scroll when modal is open */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/** Remove scrollbar from overflow-auto */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Vidstack player - remove borders and outlines */
media-player,
media-player *,
.vds-video-layout,
.vds-blocker {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

media-player {
  background: transparent !important;
}

media-provider {
  border: none !important;
  outline: none !important;
}

media-player iframe {
  border: none !important;
}