/* ============================================================
 * Kiralia · brand tokens
 * Dark, futurista. Cyan→green gradients on a deep navy base.
 * Source of truth: Web KIRALIA/kiralia-plantilla-base.json
 * ============================================================ */

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

:root {
  /* ---- Primitive ---- */
  --kiralia-navy:   #050D1A;
  --kiralia-blue:   #0088CC;
  --kiralia-mid:    #00BCD4;
  --kiralia-light:  #00C8F0;
  --kiralia-green:  #00E676;
  --kiralia-white:  #F5F8FF;
  --kiralia-gray:   #6A9BAF;

  --kiralia-grad-main: linear-gradient(135deg, #0088CC, #00E676);
  --kiralia-grad-text: linear-gradient(90deg,  #00C8F0, #00E676);
  --kiralia-grad-soft: linear-gradient(135deg, rgba(0,136,204,.15), rgba(0,230,118,.08));

  /* ---- Semantic ---- */
  --color-bg:           #050D1A;
  --color-surface:      rgba(255, 255, 255, 0.03);
  --color-surface-2:    rgba(0, 136, 204, 0.07);
  --color-card:         rgba(5, 13, 26, 0.78);
  --color-card-hover:   rgba(0, 136, 204, 0.14);
  --color-text:         #F5F8FF;
  --color-text-muted:   #6A9BAF;
  --color-border:       rgba(0, 200, 240, 0.15);
  --color-border-hover: rgba(0, 200, 240, 0.4);

  --color-primary:      var(--kiralia-blue);
  --color-primary-fg:   #ffffff;
  --color-accent:       var(--kiralia-green);

  --color-info-bg:      rgba(0, 200, 240, 0.10);
  --color-info-fg:      #00C8F0;
  --color-success-bg:   rgba(0, 230, 118, 0.12);
  --color-success-fg:   #00E676;
  --color-warn-bg:      rgba(255, 184, 0, 0.12);
  --color-warn-fg:      #FFB800;
  --color-danger-bg:    rgba(255, 76, 96, 0.12);
  --color-danger-fg:    #FF4C60;

  /* Typography */
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-heavy:     800;
  --fw-black:     900;

  /* Geometry */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 32px rgba(0, 136, 204, 0.30);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.45);

  /* Component overrides */
  --header-bg:        rgba(5, 13, 26, 0.97);
  --header-border:    var(--color-border);
  --header-blur:      saturate(180%) blur(20px);
  --btn-primary-bg:   var(--kiralia-grad-main);
  --btn-primary-fg:   #ffffff;
  --btn-primary-shadow: 0 8px 32px rgba(0, 136, 204, 0.4);
  --display-gradient: var(--kiralia-grad-text);
  --fab-bg:           var(--kiralia-grad-main);

  /* Tagline shown in the login screen subtitle */
  --tenant-tagline-content: "Soporte gestionado IT · Kiralia";
}

/* Decorative grid overlay (very subtle) */
html::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,136,204,0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(0,230,118,0.10), transparent 60%);
}