/* ============================================
   DESIGN TOKENS
   Single source of truth for colors, typography,
   spacing, radii and shadows.
   ============================================ */

/* ── TYPOGRAPHY: Avenir Next con fallback de sistema ── */
@font-face {
  font-family: 'Avenir Next';
  src: local('Avenir Next'), local('AvenirNext-Regular');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Next';
  src: local('Avenir Next Medium'), local('AvenirNext-Medium');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Next';
  src: local('Avenir Next Demi Bold'), local('AvenirNext-DemiBold');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Next';
  src: local('Avenir Next Bold'), local('AvenirNext-Bold');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Next';
  src: local('Avenir Next Heavy'), local('AvenirNext-Heavy');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── LIGHT THEME (default) — WCAG AA compliant ── */
:root,
[data-theme="light"] {
  /* Colors · surfaces */
  --bg-primary: #FAFAF8;
  --bg-secondary: #F0F0EC;
  --bg-tertiary: #FFFFFF;
  --bg-inverse: #0A0A0A;
  --bg-inverse-elevated: #1F1F1F;

  /* Colors · text */
  --text-primary: #111111;
  --text-secondary: #4A4A47;
  --text-tertiary: #6D6D69;
  --text-on-inverse: #FAFAF8;
  --text-on-inverse-strong: #FFFFFF;
  --text-on-inverse-faint: rgba(255, 255, 255, 0.75);
  --text-on-inverse-muted: rgba(255, 255, 255, 0.68);
  --text-on-inverse-subtle: rgba(255, 255, 255, 0.65);

  /* Colors · borders */
  --border: #D6D6D0;
  --border-on-inverse: rgba(255, 255, 255, 0.14);
  --border-on-inverse-strong: rgba(255, 255, 255, 0.12);
  --border-on-inverse-soft: rgba(255, 255, 255, 0.08);

  /* Colors · brand */
  --blue: #0046E0;
  --blue-dark: #0035AD;
  --blue-soft: #E6EDFF;
  --blue-on-dark: #7AA8FF;
  --accent-violet: #7C3AED;
  --accent-blue-light: #C9D7FF;

  /* Colors · form feedback (contrast-verified against --blue CTA background) */
  --form-error-color: #FFD0D0;    /* 5.14:1 on #0046E0 — passes WCAG AA 4.5:1 */
  --form-warning-color: #FFE580;  /* 5.68:1 on #0046E0 — passes WCAG AA 4.5:1 */
  --form-counter-color: rgba(255, 255, 255, 0.75); /* ~4.62:1 on #0046E0 — passes AA */

  /* Colors · neutral utilities */
  --white: #FFFFFF;
  --off-white: #FAFAF8;
  --surface-on-inverse: rgba(255, 255, 255, 0.04);
  --surface-on-inverse-hover: rgba(255, 255, 255, 0.06);

  /* Colors · contextual */
  --nav-bg: rgba(250, 250, 248, 0.55);

  /* Shadows */
  --card-shadow: 0 20px 60px rgba(0, 70, 224, 0.08);
  --card-shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.12);

  /* Filters */
  --logo-filter: brightness(0) invert(1);
  --logo-filter-on-dark: brightness(0) invert(1);
  --client-logo-filter: grayscale(1) opacity(0.5);
  --client-logo-filter-hover: grayscale(0) opacity(1);
  --client-logo-blend: multiply;
}

/* ── DARK THEME — WCAG AA compliant ── */
[data-theme="dark"] {
  /* Colors · surfaces */
  --bg-primary: #0D0D0D;
  --bg-secondary: #161616;
  --bg-tertiary: #1A1A1A;
  --bg-inverse: #222222;
  --bg-inverse-elevated: #2C2C2C;

  /* Colors · text */
  --text-primary: #F0F0EE;
  --text-secondary: #B8B8B4;
  --text-tertiary: #8A8A86;
  --text-on-inverse: #F0F0EE;
  --text-on-inverse-strong: #FFFFFF;
  --text-on-inverse-faint: rgba(255, 255, 255, 0.7);
  --text-on-inverse-muted: rgba(255, 255, 255, 0.68);
  --text-on-inverse-subtle: rgba(255, 255, 255, 0.65);

  /* Colors · borders */
  --border: rgba(255, 255, 255, 0.14);
  --border-on-inverse: rgba(255, 255, 255, 0.14);
  --border-on-inverse-strong: rgba(255, 255, 255, 0.12);
  --border-on-inverse-soft: rgba(255, 255, 255, 0.08);

  /* Colors · brand */
  --blue: #236cff;
  --blue-dark: #4070E0;
  --blue-soft: rgba(90, 144, 255, 0.16);
  --blue-on-dark: #7AA8FF;
  --accent-violet: #7C3AED;
  --accent-blue-light: #C9D7FF;

  /* Colors · form feedback (contrast-verified against --blue CTA background) */
  --form-error-color: #FFFFFF;    /* 4.50:1 on #236cff — passes WCAG AA 4.5:1 */
  --form-warning-color: #FFFFFF;  /* 4.50:1 on #236cff — passes WCAG AA 4.5:1 */
  --form-counter-color: #FFFFFF;  /* 4.50:1 on #236cff — passes WCAG AA 4.5:1 */

  /* Colors · neutral utilities */
  --white: #FFFFFF;
  --off-white: #FAFAF8;
  --surface-on-inverse: rgba(255, 255, 255, 0.04);
  --surface-on-inverse-hover: rgba(255, 255, 255, 0.06);

  /* Colors · contextual */
  --nav-bg: rgba(13, 13, 13, 0.45);

  /* Shadows */
  --card-shadow: 0 20px 60px rgba(90, 144, 255, 0.1);
  --card-shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.5);

  /* Filters */
  --logo-filter: brightness(0) invert(1);
  --logo-filter-on-dark: brightness(0) invert(1);
  --client-logo-filter: brightness(0) invert(1) opacity(0.55);
  --client-logo-filter-hover: grayscale(0) opacity(1);
  --client-logo-blend: normal;
}

/* ── GLOBAL TOKENS (theme-agnostic) ── */
:root {
  /* Colors · service accents (brand-fixed, intensidad +10%) */
  --service-data: #2D60E0;
  --service-data-soft: #608AE9;
  --service-ai: #32AADF;
  --service-ai-soft: #71BEE3;
  --service-software: #0F9D7A;
  --service-software-soft: #34C9A1;

  /* Typography · families */
  --font-display: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Typography · weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* Typography · sizes (modular scale) */
  --fs-3xs: 0.875rem;   /* 14px (clamped min) */
  --fs-2xs: 0.875rem;   /* 14px (clamped min) */
  --fs-xs: 0.875rem;    /* 14px (clamped min) */
  --fs-sm: 0.875rem;    /* 14px (clamped min) */
  --fs-base-sm: 0.875rem;/* 14px (clamped min) */
  --fs-base: 0.95rem;   /* 15.2px */
  --fs-md: 1rem;        /* 16px   */
  --fs-md-lg: 1.05rem;  /* 16.8px */
  --fs-md-xl: 1.125rem; /* 18px   */
  --fs-lg: 1.4rem;      /* 22.4px */
  --fs-xl: 1.6rem;      /* 25.6px */
  --fs-2xl: 1.8rem;     /* 28.8px */
  --fs-3xl: 2rem;       /* 32px   */
  --fs-4xl: 2.2rem;     /* 35.2px */
  --fs-5xl: 2.4rem;     /* 38.4px */
  --fs-6xl: 2.8rem;     /* 44.8px */
  --fs-7xl: 4rem;       /* 64px   */
  --fs-8xl: 6rem;       /* 96px   */
  --fs-9xl: 11rem;      /* 176px  */
  --fs-body: 17px;

  /* Typography · fluid display sizes */
  --fs-hero: clamp(3rem, 5vw, 5.5rem);
  --fs-display: clamp(2rem, 3.5vw, 3.2rem);
  --fs-section: clamp(1.5rem, 3vw, 2.5rem);

  /* Typography · line heights */
  --lh-tight: 1;
  --lh-snug: 1.2;
  --lh-base: 1.3;
  --lh-relaxed: 1.6;

  /* Spacing · 8px grid (sub-grid 4px = --space-2xs only) */
  --space-2xs: 4px;   /* 0.5× sub-grid */
  --space-xs:  8px;   /* 1× */
  --space-sm:  16px;  /* 2× */
  --space-md:  16px;  /* 2× (alias) */
  --space-lg:  24px;  /* 3× */
  --space-xl:  32px;  /* 4× */
  --space-2xl: 40px;  /* 5× */
  --space-3xl: 48px;  /* 6× */
  --space-4xl: 56px;  /* 7× */
  --space-5xl: 64px;  /* 8× */
  --space-6xl: 96px;  /* 12× */

  /* Radii · 8px-aligned (4px sub-grid for fine detail) */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;  /* sub-grid */
  --radius-lg:  16px;
  --radius-xl:  16px;  /* alias of lg for legacy callsites */
  --radius-2xl: 24px;
  --radius-3xl: 24px;  /* alias of 2xl for legacy callsites */
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Motion · durations */
  --dur-fast: 220ms;
  --dur-base: 320ms;
  --dur-slow: 480ms;
  --dur-xslow: 700ms;

  /* Motion · easings */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);   /* out-expo, friendly */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);      /* gentler exit */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* balanced */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* tamed bounce */

  /* Layout */
  --nav-h: 72px;
  --container-max: 1400px;
  --container-gutter: 1.25rem;
  --container-pad: max(var(--container-gutter), calc((100% - var(--container-max)) / 2));
}