@layer reset, theme, builder, composition, houdini, components, utilities;

@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; min-width: 0; }
  :where(html) { font-size: 100% !important; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; overflow-x: hidden; scroll-behavior: smooth; scrollbar-gutter: stable; }
  :where(body) { min-height: 100vh; min-height: 100dvh; margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  :where(img, picture, video, canvas, svg) { display: block; max-width: 100%; height: auto; font-style: italic; vertical-align: middle; shape-margin: var(--gs-pad-sm); }
  :where(input, button, textarea, select) { font: inherit; color: inherit; }
  :where(p, h1, h2, h3, h4, h5, h6, a, figure, blockquote, dl, dd) { overflow-wrap: break-word; margin: 0; }
  :where(ul[class], ol[class], ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
  :where(table) { border-collapse: collapse; border-spacing: 0; }
  :where(hr) { margin: 0; border: 0; border-top: 0.0625rem solid currentColor; }
  :where(a) { text-decoration: none; color: inherit; }
  :where(strong, b) { font-weight: var(--gs-font-weight-md); }
  :where(iframe) { border: 0; }

  /* Form element base — low-specificity defaults any component can override cleanly */
  :where(input[type="text"], input[type="email"], input[type="search"],
         input[type="tel"], input[type="url"], input[type="number"],
         select, textarea) {
    width: 100%;
    padding: var(--gs-pad-sm) var(--gs-pad-md);
    border: var(--gs-border-m) solid var(--gs-border);
    border-radius: var(--gs-radius);
    background-color: var(--gs-surface);
    color: var(--gs-canvas-on);
    font-size: var(--gs-font-m);
    transition: border-color var(--gs-motion), box-shadow var(--gs-motion);
  }
  :where(input:focus, select:focus, textarea:focus) {
    border-color: var(--gs-brand);
    box-shadow: 0 0 0 var(--gs-border-l) var(--gs-focus-ring);
    outline: none;
  }
}

@layer builder {
  :where(.bde-section-inner, .oxy-container) { width: 100%; max-width: var(--gs-layout-max); padding-inline: var(--gs-padding-layout); margin-inline: auto; display: flex; flex-direction: column; }
  .bde-skip-link, .skip-link, .oxy-skip-link { position: absolute; top: -624.9375rem; left: -624.9375rem; z-index: var(--gs-z-xl); padding: var(--gs-pad-sm) var(--gs-pad-md); background: var(--gs-brand); color: var(--gs-brand-on); font-weight: var(--gs-font-weight-md); text-decoration: none; border-radius: var(--gs-radius); box-shadow: var(--gs-shadow-raised); }
  .bde-skip-link:focus, .skip-link:focus, .oxy-skip-link:focus { top: var(--gs-pad-sm); left: var(--gs-pad-sm); position: fixed; }
}

:root {
  --gs-transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --gs-font-size-badge: clamp(0.68rem, 0.65rem + 0.15vw, 0.78rem);

  /* --- GS:LAYOUTS:START --- */
  --gs-layout-max: 85.375rem;
  --gs-layout-narrow: 45rem;
  --gs-layout-wide: 120rem;
  --gs-layout-full: 100%;
  
  --gs-grid-auto-xs: 10rem;
  --gs-grid-auto-sm: 15rem;
  --gs-grid-auto-md: 20rem;
  --gs-grid-auto-lg: 25rem;

  --gs-switcher-target-width: 30rem;
  --gs-sidebar-target-width: 20rem;
  --gs-cover-min-height: 100vh;
  --gs-scrollbar-height: 0.375rem;
  --gs-aspect-ratio: 16 / 9;
  --gs-marquee-duration: 25s;
  --gs-marquee-gap: 3rem;
  /* --- GS:LAYOUTS:END --- */

  /* --- GS:SPACING:START --- */
  
  --gs-spacing-50: 0.25rem;   
  --gs-spacing-100: 0.5rem;   
  --gs-spacing-200: 0.75rem;  
  --gs-spacing-300: 1rem;     
  --gs-spacing-400: 1.5rem;   
  --gs-spacing-500: 2rem;     
  --gs-spacing-600: 3rem;     
  --gs-spacing-700: 4rem;     
  --gs-spacing-800: 6rem;     
  --gs-spacing-900: 8rem;     

  
  --gs-fluid-xs: 0.25rem;
  --gs-fluid-sm: 0.5rem;
  --gs-fluid-md: clamp(0.75rem, 0.4vw + 0.65rem, 1rem);
  --gs-fluid-lg: clamp(1rem, 0.8vw + 0.8rem, 1.5rem);
  --gs-fluid-xl: clamp(1.5rem, 1.5vw + 1.1rem, 2.5rem);
  --gs-fluid-2xl: clamp(2rem, 3vw + 1.25rem, 4rem);
  --gs-fluid-3xl: clamp(3rem, 5vw + 1.75rem, 6rem);          

  --gs-gap-icon: 0.5rem;
  --gs-gap-item: var(--gs-fluid-sm);
  --gs-gap-card: var(--gs-fluid-md);
  --gs-padding-section: var(--gs-fluid-xl);
  --gs-padding-layout: var(--gs-fluid-md);
  /* --- GS:SPACING:END --- */

  /* --- GS:FONTS:START --- */
  --gs-font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --gs-font-family-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --gs-font-family-mono: 'JetBrains Mono', monospace;
  --gs-font-weight-body: 400;
  --gs-line-height-body: 1.5;
  --gs-font-weight-heading: 700;
  --gs-line-height-heading: 1.2;
  --gs-line-height-h3: 1.4;
  --gs-font-2xl: clamp(1.8rem, 1.2vw + 1.5rem, 2.5rem);
  --gs-font-xl: clamp(1.4rem, 0.8vw + 1.2rem, 1.8rem);
  --gs-font-l: clamp(1.125rem, 0.5vw + 1rem, 1.35rem);
  --gs-font-m: 1rem;       /* 16px */
  --gs-font-s: 0.875rem;    /* 14px */
  --gs-font-xs: 0.75rem;    /* 12px */
  /* --- GS:FONTS:END --- */
  /* --- GS:COLORS:DARK-NATIVE:START --- */
  --gs-white: oklch(100% 0 0);
  --gs-black: oklch(0% 0 0);

  --gs-canvas: oklch(14% 0.02 254);
  --gs-canvas-on: oklch(98% 0 0);
  --gs-surface: oklch(18% 0.03 256);
  --gs-surface-on: oklch(98% 0 0);
  
  --gs-brand: oklch(74% 0.16 215);
  --gs-brand-on: oklch(15% 0.02 260);
  --gs-accent: oklch(72% 0.15 72);
  --gs-accent-on: oklch(15% 0.02 60);

  --gs-text-main: oklch(98% 0 0);
  --gs-text-muted: oklch(74% 0.02 254);
  --gs-text-inv: oklch(15% 0.02 260);

  --gs-color-inverse: oklch(95% 0 0);
  --gs-color-inverse-on: oklch(15% 0.02 260);

  /* Neutral greys used when a plain achromatic value is needed */
  --gs-color-neutral: oklch(50% 0 0);
  --gs-color-subtle: oklch(35% 0 0);
  --gs-color-light: oklch(25% 0 0);

  --gs-border: oklch(30% 0.03 260);
  --gs-border-s: 0.0625rem;
  --gs-border-m: 0.125rem;
  --gs-border-l: 0.25rem;

  --gs-color-1: var(--gs-brand);
  --gs-color-1-on: var(--gs-brand-on);
  --gs-color-2: var(--gs-accent);
  --gs-color-2-on: var(--gs-accent-on);
  --gs-color-3: oklch(35% 0 0);
  --gs-color-3-on: oklch(98% 0 0);
  --gs-color-4: oklch(45% 0 0);
  --gs-color-4-on: oklch(98% 0 0);
  --gs-success: oklch(75% 0.15 150);
  --gs-success-on: oklch(12% 0.02 260);
  --gs-focus-ring: oklch(60% 0.15 250 / 30%);
  /* --- GS:COLORS:DARK-NATIVE:END --- */

  --gs-gradient-primary: linear-gradient(135deg, var(--gs-brand) 0%, var(--gs-accent) 100%);
  --gs-gradient-dark: linear-gradient(135deg, var(--gs-color-inverse) 0%, var(--gs-black) 100%);
  --gs-gradient-light: linear-gradient(135deg, var(--gs-white) 0%, var(--gs-border) 100%);
  --gs-gradient-text-blue: linear-gradient(90deg, oklch(78% 0.13 220), oklch(90% 0.05 220));
  --gs-gradient-text-blue-light: linear-gradient(90deg, oklch(78% 0.13 220), oklch(50% 0.18 220));
  --gs-gradient-text-white-slate: linear-gradient(180deg, oklch(100% 0 0) 20%, oklch(70% 0.04 220) 100%);
  /* --- GS:GRADIENTS:END --- */

  --gs-radius-xs: 0.5rem;
  --gs-radius-s: 0.5rem;
  --gs-radius-m: 0.875rem;
  --gs-radius-l: 1.25rem;
  --gs-radius-pill: 624.9375rem;
  --gs-radius-button-glow: 0.75rem;
  --gs-radius-button: 0.63rem;
  --gs-stroke-xs: 0.0625rem;
  --gs-stroke-sm: 0.125rem;

  --gs-radius-none: 0;

  
  --gs-radius: var(--gs-radius-m);
  --gs-gap: 1.00rem;

  --gs-duration-xs: 150ms;
  --gs-duration-lg: 600ms;
  --gs-motion: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  --gs-duration-flow: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  --gs-motion-hover: none;
  --gs-motion-active: none;

  --gs-motion-composite:
    transform var(--gs-motion),
    box-shadow var(--gs-motion),
    filter var(--gs-motion),
    background-color var(--gs-motion),
    color var(--gs-motion);

  --gs-shadow-ink: 0.21 0.04 265;
  --gs-glass-edge: inset 0 0.0625rem 0 0 color-mix(in oklch, var(--gs-white) 40%, transparent);
  --gs-glass-edge-strong: inset 0 0.0625rem 0 0 color-mix(in oklch, var(--gs-white) 80%, transparent);

  --gs-shadow-color: color-mix(in oklch, var(--gs-brand) 40%, transparent);
  --gs-shadow: var(--gs-shadow-color) 0 0 0 0.02436rem;
  --gs-shadow-raised-color: color-mix(in oklch, var(--gs-brand) 30%, transparent);
  --gs-shadow-raised: var(--gs-shadow-raised-color) 0 0.25rem 0.75rem 0;
  --gs-shadow-glow-cyan: 0 0 1.5625rem oklch(74% 0.16 215 / 40%);
  --gs-shadow-glow-dual: -0.625rem 0.625rem 1.875rem oklch(63% 0.16 250 / 25%), 0.625rem 0.625rem 1.875rem oklch(72% 0.15 72 / 20%);

  --gs-action-hover: color-mix(in oklch, currentColor 8%, transparent);

  /* Semantic fills for empty tracks, scrollbars, dividers, etc. */
  --gs-fill-empty-subtle: color-mix(in oklch, currentColor 10%, transparent);
  --gs-fill-empty: color-mix(in oklch, currentColor 20%, transparent);
  --gs-fill-empty-strong: color-mix(in oklch, currentColor 40%, transparent);

  
  --gs-size-2xl: var(--gs-font-2xl);
  --gs-size-xl: var(--gs-font-xl);
  --gs-size-l: var(--gs-font-l);
  --gs-size-m: var(--gs-font-m);
  --gs-size-s: var(--gs-font-s);
  --gs-size-xs: var(--gs-font-xs);

  /* Aliases para compatibilidad con nombres largos */
  --gs-size-sm: var(--gs-size-s);
  --gs-size-md: var(--gs-size-m);
  --gs-size-lg: var(--gs-size-l);

  --gs-weight-light: 300;
  --gs-weight-regular: 400;
  --gs-weight-medium: 500;
  --gs-weight-semibold: 600;
  --gs-weight-bold: 700;
  --gs-weight-black: 900;

  --gs-font-weight-xs: var(--gs-weight-regular);
  --gs-font-weight-sm: var(--gs-weight-medium);
  --gs-font-weight-md: var(--gs-weight-semibold);
  --gs-font-weight-lg: var(--gs-weight-bold);
  --gs-font-weight-xl: var(--gs-weight-black);

  --gs-rad-xs: var(--gs-radius-xs);
  --gs-rad-sm: var(--gs-radius-s);
  --gs-rad-md: var(--gs-radius-m);
  --gs-rad-lg: var(--gs-radius-l);
  --gs-rad-xl: var(--gs-radius-pill);

  --gs-depth-hover: color-mix(in oklch, var(--gs-brand) 40%, transparent) 0 0.25rem 1rem 0;
  --gs-depth-xs: color-mix(in oklch, var(--gs-brand) 20%, transparent) 0 0.0625rem 0.25rem 0;
  --gs-depth-sm: var(--gs-depth-hover);
  --gs-depth-md: var(--gs-shadow-raised);
  --gs-depth-lg: color-mix(in oklch, var(--gs-brand) 50%, transparent) 0 0.625rem 1.5rem -0.1875rem, color-mix(in oklch, var(--gs-brand) 20%, transparent) 0 0.25rem 0.5rem -0.125rem;
  --gs-depth-xl: color-mix(in oklch, var(--gs-brand) 60%, transparent) 0 1.25rem 2.5rem -0.3125rem, color-mix(in oklch, var(--gs-brand) 30%, transparent) 0 0.625rem 1rem -0.3125rem;

  --gs-pad-xs: var(--gs-fluid-xs);
  --gs-pad-sm: var(--gs-fluid-sm);
  --gs-pad-md: var(--gs-fluid-md);
  --gs-pad-lg: var(--gs-fluid-lg);
  --gs-pad-xl: var(--gs-fluid-xl);
  --gs-pad-2xl: var(--gs-fluid-2xl);

  --gs-opacity-none: 0;
  --gs-opacity-xs: 0.25;
  --gs-opacity-sm: 0.5;
  --gs-opacity-md: 0.75;
  --gs-opacity-lg: 1;
  --gs-opacity-xl: 1;

  --gs-leading-xs: 1.2;
  --gs-leading-sm: 1.5;
  --gs-leading-md: 1.625;
  --gs-leading-lg: 2;
  --gs-leading-xl: 2.5;

  --gs-stroke-xs: var(--gs-border-s);
  --gs-stroke-sm: var(--gs-border-m);
  --gs-stroke-md: var(--gs-border-l);
  --gs-stroke-lg: var(--gs-border-l);
  --gs-stroke-xl: var(--gs-border-l);

  --gs-z-xs: 10;
  --gs-z-sm: 20;
  --gs-z-md: 50;
  --gs-z-lg: 100;
  --gs-z-xl: 9999;

  --gs-scrollbar-width: 0.625rem;
  --gs-scrollbar-height: 0.625rem;

  --gs-glass-bg-opacity: 25%;
  --gs-glass-blur: 1rem;
  --gs-glass-saturate: 180%;
  --gs-glass-border: 0.0625rem;
  --gs-glass-glow-opacity: 30%;
  --gs-glass-speed: 6s;

  --gs-glass-bg-opacity-high: 50%;
  --gs-glass-blur-high: 1.5rem;
  --gs-glass-saturate-high: 200%;
  --gs-glass-border-high: 0.125rem;
  --gs-glass-glow-opacity-high: 50%;
  --gs-glass-speed-high: 4s;
}

@layer theme {
  :where(body) {
    background-color: var(--gs-canvas);
    color: var(--gs-text-main);
    font-family: var(--gs-font-family-body);
    font-size: var(--gs-font-m);
    font-weight: var(--gs-font-weight-body);
    line-height: var(--gs-line-height-body);
  }
  :where(h1, .h1) { font-family: var(--gs-font-family-heading); font-size: var(--gs-font-2xl); font-weight: var(--gs-font-weight-heading); line-height: var(--gs-line-height-heading); text-wrap: balance; }
  :where(h2, .h2) { font-family: var(--gs-font-family-heading); font-size: var(--gs-font-xl); font-weight: var(--gs-font-weight-heading); line-height: var(--gs-line-height-heading); text-wrap: balance; }
  :where(h3, .h3) { font-family: var(--gs-font-family-body); font-size: var(--gs-font-l); font-weight: var(--gs-font-weight-heading); line-height: var(--gs-line-height-h3); text-wrap: balance; }
  :where(h4, h5, h6) { font-family: var(--gs-font-family-body); font-size: var(--gs-font-m); font-weight: var(--gs-font-weight-heading); }
  :where(p) { max-width: 65ch; text-wrap: pretty; }
  :where(a:not([class])) { color: var(--gs-brand); text-decoration: underline; text-underline-offset: 0.2em; transition: color var(--gs-motion); }
  :where(a:not([class]):hover) { color: var(--gs-action-hover); }
  ::selection { background-color: var(--gs-brand); color: var(--gs-brand-on); }
  
  /* Premium Scrollbar */
  ::-webkit-scrollbar {
    width: var(--gs-scrollbar-width, 0.625rem);
    height: var(--gs-scrollbar-height, 0.625rem);
  }
  ::-webkit-scrollbar-track {
    background: var(--gs-canvas);
  }
  ::-webkit-scrollbar-thumb {
    background: oklch(25% 0 0);
    border: 0.125rem solid var(--gs-canvas);
    border-radius: var(--gs-radius-pill, 100vmax);
    transition: background 0.3s ease;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--gs-brand);
  }

  /* Firefox standard styling mapping */
  * {
    scrollbar-width: thin;
    scrollbar-color: oklch(25% 0 0) var(--gs-canvas);
  }

  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

  
  :where([data-intent="brand"]) {
    --local-bg: var(--gs-brand);
    --local-intent-bg: var(--gs-brand);
    --local-color: var(--gs-brand-on);
    --local-intent-color: var(--gs-brand);
    --gs-text-main: var(--gs-brand-on);
    --gs-text-muted: color-mix(in oklch, var(--gs-brand-on) 75%, var(--gs-brand));
    --gs-text-light: color-mix(in oklch, var(--gs-brand-on) 55%, var(--gs-brand));
    --gs-border: color-mix(in oklch, var(--gs-brand-on) 15%, var(--gs-brand));
  }
  :where([data-intent="accent"]) {
    --local-bg: var(--gs-accent);
    --local-intent-bg: var(--gs-accent);
    --local-color: var(--gs-accent-on);
    --local-intent-color: var(--gs-accent);
    --gs-text-main: var(--gs-accent-on);
    --gs-text-muted: color-mix(in oklch, var(--gs-accent-on) 75%, var(--gs-accent));
    --gs-text-light: color-mix(in oklch, var(--gs-accent-on) 55%, var(--gs-accent));
    --gs-border: color-mix(in oklch, var(--gs-accent-on) 15%, var(--gs-accent));
  }
  :where([data-intent="inverse"]) {
    --local-bg: var(--gs-color-inverse);
    --local-intent-bg: var(--gs-color-inverse);
    --local-color: var(--gs-color-inverse-on);
    --local-intent-color: var(--gs-color-inverse);
    --gs-text-main: var(--gs-color-inverse-on);
    --gs-text-muted: color-mix(in oklch, var(--gs-color-inverse-on) 75%, var(--gs-color-inverse));
    --gs-text-light: color-mix(in oklch, var(--gs-color-inverse-on) 55%, var(--gs-color-inverse));
    --gs-border: color-mix(in oklch, var(--gs-color-inverse-on) 15%, var(--gs-color-inverse));
  }
  :where([data-intent="surface"]) {
    --local-intent-bg: var(--gs-surface);
    --local-color: var(--gs-text-main);
    --local-intent-color: var(--gs-text-main);
  }
  :where([data-intent="canvas"]) {
    --local-intent-bg: var(--gs-canvas);
    --local-color: var(--gs-text-main);
    --local-intent-color: var(--gs-text-main);
  }

  
  :where([data-size="sm"]) {
    --local-fz: var(--gs-font-s);
    --local-pad-y: var(--gs-spacing-100);
    --local-pad-x: var(--gs-spacing-200);
    --local-pad: var(--gs-spacing-100) var(--gs-spacing-200);
    --local-height: auto;
  }
  :where([data-size="md"]) {
    --local-fz: var(--gs-font-m);
    --local-pad-y: var(--gs-spacing-200);
    --local-pad-x: var(--gs-spacing-300);
    --local-pad: var(--gs-spacing-200) var(--gs-spacing-300);
    --local-height: auto;
  }
  :where([data-size="lg"]) {
    --local-fz: var(--gs-font-l);
    --local-pad-y: var(--gs-spacing-300);
    --local-pad-x: var(--gs-spacing-400);
    --local-pad: var(--gs-spacing-300) var(--gs-spacing-400);
    --local-height: auto;
  }

}