/* ============================================================
   SparkTechs — Color tokens
   Source of truth: Book Brand Spark v2603.pdf (official brand book)
   Base palette is intentionally small — 4 neutrals + 1 brand blue + 1 accent orange.
   ============================================================ */

:root {
  /* ---- Base palette (from brand book, verbatim) ---- */
  --base-space-black: #000000;   /* "Toque moderno, sensación de sofisticación y elegancia" */
  --base-sky: #1b00c7;           /* "Simboliza confianza, estabilidad y eficiencia" — primary brand blue */
  --base-electric-sky: #1b00c7;  /* Brand book lists this identically to Sky — treated as the same value */
  --base-dust: #ebf0f2;          /* Cool light neutral for surfaces/sections */
  --base-space-white: #ffffff;   /* "Evoca pulcritud, pureza y un enfoque minimalista" */
  --base-electric-orange: #ff7a00; /* "Modernidad y vitalidad" — high-energy accent, used sparingly for CTAs */

  /* ---- Extended neutral ramp (derived from Space Black / Dust, for text & borders) ---- */
  --neutral-900: #0a0a12;
  --neutral-800: #1c1e2b;
  --neutral-700: #33364a;
  --neutral-600: #565973;
  --neutral-500: #7a7d97;
  --neutral-400: #a3a6bc;
  --neutral-300: #c7cad9;
  --neutral-200: #dde1ea;
  --neutral-100: var(--base-dust);
  --neutral-50: #f6f8f9;

  /* ---- Brand blue ramp (tints/shades of Sky, for hover/press/subtle fills) ---- */
  --sky-900: #100078;
  --sky-800: #150091;
  --sky-700: #1a00b0;
  --sky-600: var(--base-sky);
  --sky-500: #3a1fe0;
  --sky-400: #6752ea;
  --sky-300: #9c8ff2;
  --sky-200: #cdc6f8;
  --sky-100: #ebe8fd;
  --sky-50: #f5f4fe;

  /* ---- Accent orange ramp ---- */
  --orange-700: #cc5f00;
  --orange-600: #e66d00;
  --orange-500: var(--base-electric-orange);
  --orange-400: #ff9838;
  --orange-300: #ffb768;
  --orange-200: #ffd9a8;
  --orange-100: #ffedd6;
  --orange-50: #fff6ea;

  /* ---- Deep navy ramp (new — a desaturated, more neutral dark blue for full-bleed
     "tech/product" dark sections and device-mockup panels, sitting alongside the
     existing pure Space-Black surfaces. Same Sky hue family, lower chroma, so it
     reads as "SparkTechs at night" rather than an unrelated color.) ---- */
  --navy-900: #0b1130;
  --navy-800: #141c47;
  --navy-700: #1e2a5e;
  --navy-600: #2b3b7a;
  --navy-500: #3f4f96;

  /* ---- Semantic: text ---- */
  --text-primary: var(--base-space-black);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-on-dark: var(--base-space-white);
  --text-on-dark-secondary: var(--neutral-300);
  --text-on-brand: var(--base-space-white);
  --text-link: var(--base-sky);
  --text-accent: var(--orange-600);

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--base-space-white);
  --surface-section-alt: var(--base-dust);
  --surface-card: var(--base-space-white);
  --surface-dark: var(--neutral-900);
  --surface-dark-elevated: var(--neutral-800);
  --surface-brand: var(--base-sky);
  --surface-accent: var(--base-electric-orange);
  --surface-overlay: rgba(10, 10, 18, 0.6);
  --surface-navy: var(--navy-900);           /* deep navy section background */
  --surface-navy-elevated: var(--navy-700);  /* cards/panels sitting on a navy section */
  --gradient-brand: linear-gradient(135deg, var(--sky-600) 0%, var(--sky-400) 100%); /* pill tab/CTA accents on light or navy backgrounds */

  /* ---- Semantic: borders ---- */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-dark: rgba(255, 255, 255, 0.12);
  --border-navy: rgba(255, 255, 255, 0.14);
  --border-brand: var(--base-sky);
  --border-accent: var(--base-electric-orange);

  /* ---- Semantic: interactive states ---- */
  --action-primary: var(--base-sky);
  --action-primary-hover: var(--sky-700);
  --action-primary-active: var(--sky-800);
  --action-accent: var(--base-electric-orange);
  --action-accent-hover: var(--orange-600);
  --action-accent-active: var(--orange-700);
  --action-dark: var(--neutral-900);
  --action-dark-hover: #26283a;

  /* ---- Semantic: feedback (derived, not in brand book — used sparingly for system states) ---- */
  --feedback-success: #1e9e6b;
  --feedback-warning: var(--base-electric-orange);
  --feedback-error: #e0453c;
}
