/* ============================================================
   DESIGN TOKENS — Bizopps Group
   Source: Figma lF0BVdJxwWWieqRoK8IpMS
   DO NOT edit values here without updating DESIGN_SYSTEM.md
   ============================================================ */

:root {
  /* ── Color Primitives: Blue Family ── */
  --color-stratos-dark:     #000847;
  --color-stratos:          #000a59;
  --color-stratos-light:    #4c538a;
  --color-stratos-lighter:  #cccedd;
  --color-astronaut-darker: #0e162e;
  --color-astronaut-light:  #66739d;
  --color-midnight-dark:    #001b36;
  --color-midnight:         #012244;
  --color-midnight-light:   #4d647c;
  --color-brand-primary:    #102360;

  /* ── Color Primitives: Neutral Family ── */
  --color-neutral-darkest:  #000000;
  --color-neutral-darker:   #191919;
  --color-neutral:          #7f7f7f;
  --color-athens-gray:      #5b5c5e;
  --color-neutral-lightest: #f2f2f2;
  --color-white:            #ffffff;

  /* ── Status ── */
  --color-red: #FF3B30;

  /* ── Semantic: Color Scheme 1 (Light) ── */
  --scheme1-bg:         #ffffff;
  --scheme1-text:       #000000;
  --scheme1-accent:     #000a59;
  --scheme1-border:     rgba(0, 0, 0, 0.15);
  --scheme1-foreground: #f2f2f2;

  /* ── Semantic: Color Scheme 2 (Dark) ── */
  --scheme2-text:   #ffffff;
  --scheme2-border: rgba(255, 255, 255, 0.20);

  /* ── Opacity Tokens: White Alpha ── */
  --opacity-white-5:    rgba(255, 255, 255, 0.05);
  --opacity-white-10:   rgba(255, 255, 255, 0.10);
  --opacity-white-60:   rgba(255, 255, 255, 0.60);
  --opacity-transparent: rgba(255, 255, 255, 0.00);

  /* ── Opacity Tokens: Black Alpha ── */
  --opacity-neutral-5:  rgba(0, 0, 0, 0.05);
  --opacity-neutral-15: rgba(0, 0, 0, 0.15);
  --opacity-neutral-60: rgba(0, 0, 0, 0.60);

  /* ── Typography ── */
  --font-heading: "Inter Tight", sans-serif;
  --font-body:    "Inter", sans-serif;

  --text-tiny:    12px;
  --text-small:   16px;
  --text-regular: 18px;
  --text-medium:  20px;
  --text-large:   26px;
  --heading-4:    40px;
  --heading-3:    48px;
  --heading-2:    60px;

  --lh-body:     1.6;
  --lh-heading:  1.2;
  --lh-h2-fixed: 76px;
  --ls-heading:  1px;

  /* ── Spacing ── */
  --padding-global:     64px;
  --padding-section-lg: 112px;
  --padding-section-sm: 48px;

  /* ── Layout ── */
  --container:    1280px;
  --max-w-lg:     768px;
  --max-w-xl:     1024px;

  /* ── Radius ── */
  --radius-ui:   8px;
  --radius-pill: 100px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm:    0 2px 4px -2px rgba(0,0,0,0.06), 0 4px 8px -2px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 8px -4px rgba(0,0,0,0.03), 0 20px 24px -4px rgba(0,0,0,0.08);
  --shadow-card:  0 20px 24px -4px rgba(0,0,0,0.08), 0 8px 8px -4px rgba(0,0,0,0.03);
  --shadow-glass: 0 24px 60px 0px rgba(5,14,48,0.55);
  --shadow-tag:   0 2px 4px rgba(0,0,0,0.18);
  --shadow-stat:  0 8px 12px rgba(30,80,200,0.22);
  --shadow-input: inset 0 2px 4px rgba(0,0,0,0.04);
  --shadow-cta:   0 4px 8px rgba(0,10,89,0.06);

  /* ── Gradients ── */
  --grad-footer:        linear-gradient(to top, #001b36, #4d647c);
  --grad-historia:      linear-gradient(to bottom, #0e162e, #000847 55%, #000a59);
  --grad-cta:           linear-gradient(to right, #012244, #4d647c 73.5%);
  --grad-nuevas-left:   linear-gradient(to top, #f8fafc, #ffffff 60%, #f1f5f9);
  --grad-surface:       linear-gradient(to bottom, #f8fafc, #ffffff 60%, #f1f5f9);
  --grad-banner-line:   linear-gradient(to right, #012244, transparent 77%);
  --grad-stratos-line:  linear-gradient(to right, #000a59, transparent);
  --grad-midnight-line: linear-gradient(to right, #4d647c, #0a1236);
  --grad-brand-line:    linear-gradient(to right, #102360, transparent 60%);
}