:root {

  --color-bg:            #000000;
  --color-surface:       #2B2B2B;
  --color-bg-light:      #F8FAFC;
  --color-surface-light: #FFFFFF;

  --color-navy-legacy:   #0A0E27;

  --color-plate:         #000000;

  --color-fg:         #F8FAFC;

  --color-fg-light:   #101010;
  --color-muted:      #94A3B8;
  --color-muted-light:#475569;

  --color-border:       rgba(255,255,255,0.08);
  --color-border-strong:rgba(255,255,255,0.18);
  --color-border-light: #E2E8F0;

  --color-primary:       #DC2626;
  --color-primary-hover: #B91C1C;
  --color-csirt:         #06B6D4;
  --color-zerotrust:     #A855F7;
  --color-ctem:          #F97316;
  --color-grc:           #22C55E;
  --color-ngsoc:         #E2E8F0;

  --color-azul:      #3773c2;

  --color-azul-soft: #60A5FA;

  --color-azul-ink:  #2E63A8;

  --color-destructive: #EF4444;
  --color-ring:        #DC2626;
  --color-success:     #22C55E;
  --color-danger-soft: #FCA5A5;
  --color-csirt-soft:  #67E8F9;

  --color-zerotrust-soft: #C084FC;
  --color-grc-soft:       #4ADE80;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;
  --text-5xl:  56px;
  --text-6xl:  72px;

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-base:16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: 128px;

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.35);

  --glow-primary:   0 0 24px rgba(220, 38, 38, 0.45);
  --glow-csirt:     0 0 24px rgba(  6,182,212, 0.45);
  --glow-zerotrust: 0 0 24px rgba(168, 85,247, 0.45);
  --glow-ctem:      0 0 24px rgba(249,115, 22, 0.45);
  --glow-grc:       0 0 24px rgba( 34,197, 94, 0.45);
  --glow-ngsoc:     0 0 24px rgba(226,232,240, 0.20);

  --ease-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  --container-max: 1760px;
  --container-px:  clamp(24px, 4vw, 64px);
  --header-h:      88px;
  --z-header:      100;
  --z-overlay:     500;
  --z-modal:       1000;
  --z-toast:       1500;
  --z-base:        0;
  --z-raised:      10;
  --z-sticky:      20;

  --color-scrim:        rgba(0, 0, 0, 0.85);
  --color-glass-bg:     rgba(23, 23, 23, 0.6);
  --color-glass-border: rgba(255, 255, 255, 0.12);

  --color-persona-asha:      var(--color-primary);
  --color-persona-csirt:     var(--color-csirt);
  --color-persona-zerotrust: var(--color-zerotrust);
  --color-persona-ctem:      var(--color-ctem);
  --color-persona-grc:       var(--color-grc);
  --color-persona-ngsoc:     var(--color-ngsoc);

  --color-surface-elev: #383838;

  --color-primary-ink:   #DC2626;
  --color-primary-lift:  #EF4444;

  --color-primary-soft:  #F87171;

  --color-ctem-soft:     #FB923C;

  --color-primary-deep: #B01E1E;
  --color-ctem-ink:      #C05105;
  --color-csirt-ink:     #047E93;
  --color-zerotrust-ink: #9C3EF6;
  --color-grc-ink:       #17843F;
  --color-ngsoc-ink:     #5475A2;

  --subnav-h: 60px;

  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-cyber:  cubic-bezier(0.83, 0, 0.17, 1);

  --sol-0:      #000000;
  --sol-1:      #141414;
  --sol-2:      #212121;
  --sol-clair:  #F8FAFC;

  --color-muted-lift: #A0AEC2;

}

@media (max-width: 768px) {
  :root {

    --text-xs:   10px;
    --text-sm:   12px;
    --text-base: 14px;
    --text-lg:   15px;
    --text-xl:   17px;
    --text-2xl:  20px;
    --text-3xl:  24px;
    --text-4xl:  27px;
    --text-5xl:  30px;
    --text-6xl:  34px;
    --container-px: 20px;
    --header-h: 76px;
    --subnav-h: 54px;
  }

  input, select, textarea {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   1ms;
    --duration-normal: 1ms;
    --duration-slow:   1ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}