/* ============================================================================
 * AIM ÆGIS — Design Tokens
 * ============================================================================
 * Single source of truth for colors, typography, spacing, and motion.
 * Imported once in base.html before any component CSS.
 * ========================================================================= */

/* Fuentes auto-hospedadas (subset latin, fuente variable) — CSP estricta 'self',
 * sin dependencia de Google Fonts (coherente con la postura RGPD del producto). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/static/fonts/plus-jakarta-sans.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/static/fonts/jetbrains-mono.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('/static/fonts/cormorant-garamond-italic.woff2') format('woff2');}

:root {
  /* ===== Color Palette ===== */
  
  /* Background — deep black sovereign */
  --bg-deep:        #08090F;
  --bg-base:        #0B0D14;
  --bg-card:        #131825;
  --bg-elevated:    #1A2030;
  --bg-hover:       #1F2640;
  --topnav-bg:      rgba(8, 9, 15, 0.85);
  
  /* Borders */
  --border:         #1F2438;
  --border-bright:  #2F3650;
  --border-accent:  rgba(201, 169, 97, 0.3);
  
  /* Foreground */
  --fg-primary:     #ECEEF2;
  --fg-secondary:   #A8AEBE;
  --fg-tertiary:    #8B92A6;
  --fg-disabled:    #4A5066;
  
  /* Brand accent — amber-gold (the AIM ÆGIS gold) */
  --accent:         #C9A961;
  --accent-soft:    #E8D9B0;
  --accent-deep:    #9C7F3F;
  --accent-glow:    rgba(201, 169, 97, 0.15);
  
  /* Functional colors */
  --green:          #34D399;
  --green-soft:     rgba(52, 211, 153, 0.12);
  --amber:          #FBBF24;
  --amber-soft:     rgba(251, 191, 36, 0.12);
  --red:            #F87171;
  --red-soft:       rgba(248, 113, 113, 0.12);
  --blue:           #5B7FD9;
  --blue-soft:      rgba(91, 127, 217, 0.12);
  
  /* Status colors (workflow states) */
  --status-draft:    var(--fg-tertiary);
  --status-review:   var(--amber);
  --status-approved: var(--green);
  --status-rejected: var(--red);
  --status-signed:   var(--accent);
  
  /* ===== Typography ===== */
  
  --font-display:   'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --font-accent:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  
  /* Type scale */
  --fs-xs:          0.75rem;   /* 12px */
  --fs-sm:          0.875rem;  /* 14px */
  --fs-base:        1rem;      /* 16px */
  --fs-md:          1.125rem;  /* 18px */
  --fs-lg:          1.25rem;   /* 20px */
  --fs-xl:          1.5rem;    /* 24px */
  --fs-2xl:         2rem;      /* 32px */
  --fs-3xl:         2.5rem;    /* 40px */
  --fs-4xl:         3.5rem;    /* 56px */
  --fs-5xl:         5rem;      /* 80px */
  
  /* Line heights */
  --lh-tight:       1.15;
  --lh-snug:        1.3;
  --lh-normal:      1.5;
  --lh-relaxed:     1.65;
  
  /* Letter spacing */
  --ls-tight:       -0.025em;
  --ls-normal:      0;
  --ls-wide:        0.05em;
  --ls-widest:      0.15em;
  
  /* ===== Spacing ===== */
  --sp-1:           0.25rem;   /* 4px */
  --sp-2:           0.5rem;    /* 8px */
  --sp-3:           0.75rem;   /* 12px */
  --sp-4:           1rem;      /* 16px */
  --sp-5:           1.25rem;   /* 20px */
  --sp-6:           1.5rem;    /* 24px */
  --sp-8:           2rem;      /* 32px */
  --sp-10:          2.5rem;    /* 40px */
  --sp-12:          3rem;      /* 48px */
  --sp-16:          4rem;      /* 64px */
  --sp-20:          5rem;      /* 80px */
  --sp-24:          6rem;      /* 96px */
  
  /* ===== Radii ===== */
  --r-sm:           4px;
  --r-md:           8px;
  --r-lg:           12px;
  --r-xl:           16px;
  --r-full:         9999px;
  
  /* ===== Shadows ===== */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-gold:    0 0 32px rgba(201, 169, 97, 0.15);
  
  /* ===== Motion ===== */
  --transition-fast:    120ms ease-out;
  --transition-base:    200ms ease-out;
  --transition-slow:    300ms ease-out;
  --easing-emphasis:    cubic-bezier(0.16, 1, 0.3, 1);
  
  /* ===== Z-indices ===== */
  --z-base:         0;
  --z-elevated:     10;
  --z-sticky:       100;
  --z-modal:        1000;
  --z-toast:        2000;
  
  /* ===== Container widths ===== */
  --container-narrow:  720px;
  --container-base:    1080px;
  --container-wide:    1280px;
  --container-full:    1440px;
}

/* ============================================================================
 * Global UX polish v1.286 — aplica a la web Y al SaaS (tokens.css lo cargan
 * ambos shells). Tasteful, performante, CSP-clean y consciente de
 * prefers-reduced-motion en todo momento.
 * ========================================================================= */

/* Los saltos de ancla despejan el nav fijo. */
html { scroll-padding-top: 80px; }

/* Selección de texto de marca (el SaaS no tenía; oro sobre fondo profundo). */
::selection { background: var(--accent); color: var(--bg-deep); }
::-moz-selection { background: var(--accent); color: var(--bg-deep); }

/* Scrollbar fina y de marca en todo contenedor con scroll. */
* { scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Anillo de foco intencional y accesible (navegación por teclado). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Barra de progreso de scroll — solo se pinta donde un shell inyecta
 * `.scroll-progress`. Vía moderna: CSS scroll-driven (coste cero en el hilo
 * principal). Vía de respaldo: un rAF mínimo fija scaleX (ver motion JS). */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: var(--z-toast);
  transform: scaleX(0); transform-origin: 0 0;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 55%, var(--accent-soft));
  box-shadow: 0 0 14px var(--accent-glow);
  pointer-events: none; will-change: transform;
}
@supports (animation-timeline: scroll()) {
  @keyframes aegis-scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .scroll-progress { animation: aegis-scroll-progress linear both; animation-timeline: scroll(root block); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
}