/* Nitropc — Color tokens
   Base palette sourced directly from brandbook page 9:
   #416bf3 #4345fb #1a1a1a #ff5124 / #ffffff #f6f6f6 #e7e7e7 #b1b1b1
   Ramps below are generated in oklch from those exact seeds to give
   every color room to work (hover/active/disabled/surfaces) without
   inventing new brand hues. */

:root {
  /* ---- Base: Blue (primary) ---- */
  --blue-50:  oklch(96% 0.02  259);
  --blue-100: oklch(91% 0.045 259);
  --blue-200: oklch(84% 0.075 259);
  --blue-300: oklch(75% 0.11  259);
  --blue-400: oklch(68% 0.15  259);
  --blue-500: #416bf3; /* brand seed */
  --blue-600: oklch(56% 0.20  262);
  --blue-700: oklch(48% 0.19  264);
  --blue-800: oklch(40% 0.16  265);
  --blue-900: oklch(32% 0.12  266);

  /* ---- Base: Indigo (secondary / electric accent) ---- */
  --indigo-50:  oklch(95% 0.03  276);
  --indigo-100: oklch(89% 0.06  276);
  --indigo-200: oklch(80% 0.11  276);
  --indigo-300: oklch(70% 0.17  276);
  --indigo-400: oklch(62% 0.24  277);
  --indigo-500: #4345fb; /* brand seed */
  --indigo-600: oklch(52% 0.27  278);
  --indigo-700: oklch(44% 0.23  279);
  --indigo-800: oklch(37% 0.18  280);
  --indigo-900: oklch(29% 0.13  281);

  /* ---- Base: Orange (alert / energy accent) ---- */
  --orange-50:  oklch(96% 0.02  40);
  --orange-100: oklch(91% 0.06  38);
  --orange-200: oklch(85% 0.11  36);
  --orange-300: oklch(78% 0.15  34);
  --orange-400: oklch(72% 0.18  32);
  --orange-500: #ff5124; /* brand seed */
  --orange-600: oklch(60% 0.19  29);
  --orange-700: oklch(50% 0.17  27);
  --orange-800: oklch(41% 0.14  26);
  --orange-900: oklch(32% 0.10  25);

  /* ---- Base: Ink / Neutral ramp ----
     Anchored on brand seeds #1a1a1a (ink), #ffffff, #f6f6f6, #e7e7e7, #b1b1b1 */
  --ink-1000: #1a1a1a; /* brand seed */
  --ink-900:  oklch(18% 0 0);
  --ink-800:  oklch(27% 0 0);
  --ink-700:  oklch(37% 0 0);
  --ink-600:  oklch(47% 0 0);
  --ink-500:  #b1b1b1; /* brand seed */
  --ink-400:  oklch(78% 0 0);
  --ink-300:  #e7e7e7; /* brand seed */
  --ink-200:  #f6f6f6; /* brand seed */
  --ink-100:  #ffffff; /* brand seed */

  /* ================= Semantic aliases ================= */

  /* Surfaces */
  --surface-page:      var(--ink-100);
  --surface-sunken:     var(--ink-200);
  --surface-card:      var(--ink-100);
  --surface-card-alt:  var(--ink-200);
  --surface-border:    var(--ink-300);
  --surface-border-strong: var(--ink-500);
  --surface-inverse:   var(--ink-1000);
  --surface-inverse-alt: var(--ink-900);
  --surface-overlay:   oklch(18% 0 0 / 0.6);

  /* Text */
  --text-primary:    var(--ink-1000);
  --text-secondary:  var(--ink-700);
  --text-tertiary:   var(--ink-600);
  --text-disabled:   var(--ink-400);
  --text-on-dark:    var(--ink-100);
  --text-on-dark-secondary: var(--ink-400);
  --text-link:       var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Brand / interactive */
  --brand-primary:        var(--blue-500);
  --brand-primary-hover:  var(--blue-600);
  --brand-primary-active: var(--blue-700);
  --brand-secondary:        var(--indigo-500);
  --brand-secondary-hover:  var(--indigo-600);
  --brand-secondary-active: var(--indigo-700);
  --brand-gradient: linear-gradient(115deg, var(--blue-500) 0%, var(--indigo-500) 100%);

  /* Energy / promo accent (sparingly — sale badges, CTAs that must pop against blue) */
  --accent-energy:        var(--orange-500);
  --accent-energy-hover:  var(--orange-600);
  --accent-energy-active: var(--orange-700);
  --accent-energy-tint:   var(--orange-50);

  /* Semantic status (derived, not brand seeds — used sparingly for real states) */
  --status-success:      oklch(58% 0.15 149);
  --status-success-tint: oklch(95% 0.04 149);
  --status-warning:      oklch(75% 0.16 78);
  --status-warning-tint: oklch(96% 0.05 78);
  --status-danger:       oklch(55% 0.20 27);
  --status-danger-tint:  oklch(95% 0.03 27);
  --status-info:         var(--blue-500);
  --status-info-tint:    var(--blue-50);

  /* Focus ring */
  --focus-ring: var(--blue-400);
}

/* Nitropc — Typography tokens
   SUBSTITUTION FLAG: the brandbook's "Tipografía" page ships empty
   (unfilled template placeholder — no typeface was ever specified).
   The wordmark itself is set in a bold geometric grotesque with sharp
   (not rounded) terminals, circular counters and a dotted "i" — closest
   Google Fonts match is Poppins (ExtraBold/Bold) for display use.
   Paired with Inter for body copy: a neutral, highly-legible workhorse
   that keeps long spec sheets and product copy readable at small sizes.
   Ask Nitropc for real brand font files to replace this substitution. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace; /* system stack — no brand mono spec given */

  /* Type scale (major third-ish, tuned for a specs-heavy ecommerce site) */
  --text-xs:   0.75rem;   /* 12px — legal, fine print */
  --text-sm:   0.875rem;  /* 14px — captions, meta, spec labels */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead body */
  --text-lg:   1.375rem;  /* 22px — card titles */
  --text-xl:   1.75rem;   /* 28px — section titles */
  --text-2xl:  2.25rem;   /* 36px — page titles */
  --text-3xl:  3rem;      /* 48px — hero */
  --text-4xl:  4rem;      /* 64px — hero, large */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.12em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
}

/* Nitropc — Spacing, radius, shadow, motion tokens */
:root {
  /* Spacing — 4px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius — Nitropc leans on the faceted mark for personality, so UI
     chrome stays fairly restrained/squared with soft (not pill-heavy) corners */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Elevation — soft, cool-tinted shadows (never pure black) */
  --shadow-sm: 0 1px 2px oklch(20% 0 0 / 0.06), 0 1px 1px oklch(20% 0 0 / 0.04);
  --shadow-md: 0 4px 12px oklch(20% 0 0 / 0.08), 0 1px 3px oklch(20% 0 0 / 0.06);
  --shadow-lg: 0 12px 32px oklch(20% 0 0 / 0.14), 0 2px 6px oklch(20% 0 0 / 0.08);
  --shadow-glow-blue: 0 8px 28px oklch(56% 0.20 262 / 0.35);
  --shadow-glow-orange: 0 8px 28px oklch(60% 0.19 29 / 0.35);

  /* Borders */
  --border-hairline: 1px solid var(--surface-border);
  --border-strong: 1px solid var(--surface-border-strong);

  /* Motion — quick, confident, gaming-adjacent but never bouncy/playful */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 340ms; /* @kind other */

  /* Layout */
  --container-max: 1280px;
  --container-pad: var(--space-6);
}

/* Nitropc — base resets / element defaults, kept minimal since
   components style themselves via tokens */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

::selection {
  background: var(--indigo-200);
  color: var(--ink-1000);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}