/* ============================================
   CERTIA GROUP® — Design System Variables
   Fase 1: Base UI / UX Premium
   ============================================ */

:root {
    /* === CORE PALETTE FROM PROGNOSIS TALENTUM === */
    --black:        #080A0F;
    --black-2:      #0E1119;
    --black-3:      #141820;
    --black-4:      #1C2230;
    --black-5:      #242D3D;

    --white:        #F4F6FC;
    --white-2:      #DDE2EE;
    --white-3:      #B8C2D8;
    --white-4:      #8896B4;
    --white-5:      #5A6880;

    --cyan:         #00D4FF;
    --cyan-dim:     rgba(0,212,255,.12);
    --cyan-glow:    rgba(0,212,255,.25);

    --magenta:      #FF0080;
    --acid:         #CCFF00;
    --acid-dim:     rgba(204,255,0,.12);
    --orange:       #FF6B00;
    --violet:       #9B59FF;

    /* ---- Paleta Principal (Mapeada al UI) ---- */
    --color-primary:        var(--cyan);
    --color-primary-light:  #00A8CC;
    --color-primary-dark:   #007A99;
    --color-primary-glow:   var(--cyan-glow);

    --color-accent:         var(--acid);
    --color-accent-light:   #99CC00;
    --color-accent-glow:    rgba(204,255,0,.20);

    --color-success:        var(--acid);
    --color-warning:        var(--orange);
    --color-danger:         var(--magenta);
    --color-info:           var(--cyan);

    /* ---- Fondos & Superficies ---- */
    --bg-deep:              var(--black);
    --bg-dark:              var(--black-2);
    --bg-card:              var(--black-2);
    --bg-card-hover:        var(--black-3);
    --bg-surface:           var(--black-3);
    --bg-input:             var(--black-2);

    /* ---- Texto ---- */
    --text-primary:         var(--white);
    --text-secondary:       var(--white-3);
    --text-muted:           var(--white-4);
    --text-disabled:        var(--white-5);

    /* ---- Bordes ---- */
    --border-subtle:        rgba(0,212,255,.06);
    --border-medium:        var(--black-4);
    --border-focus:         var(--cyan);

    /* ---- Glassmorphism ---- */
    --glass-bg:             rgba(8,10,15, 0.85);
    --glass-border:         rgba(0,212,255, 0.08);
    --glass-blur:           20px;

    /* ---- Gradientes ---- */
    --gradient-brand:       linear-gradient(135deg, var(--cyan) 0%, var(--violet) 50%, var(--acid) 100%);
    --gradient-card:        linear-gradient(145deg, var(--black-2) 0%, var(--black) 100%);
    --gradient-glow:        radial-gradient(ellipse at 50% 0%, var(--cyan-glow) 0%, transparent 70%);

    /* ---- Sombras ---- */
    --shadow-sm:            0 1px 6px rgba(0,0,0,.4), 0 0 0 1px rgba(0,212,255,.04);
    --shadow-md:            0 4px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(0,212,255,.06);
    --shadow-lg:            0 12px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,255,.08);
    --shadow-glow-primary:  0 0 24px rgba(0,212,255,.3), 0 0 48px rgba(0,212,255,.12);
    --shadow-glow-accent:   0 0 20px rgba(204,255,0,.25);

    /* ---- Tipografía ---- */
    --font-sans:            'Space Grotesk', 'Helvetica Neue', sans-serif;
    --font-display:         'Space Grotesk', 'Inter', sans-serif;
    --font-mono:            'IBM Plex Mono', 'Space Mono', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold: 600;
    --weight-bold:    700;
    --weight-extrabold: 800;

    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ---- Espaciado ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ---- Bordes Redondeados (El tema usa bordes más rectos) ---- */
    --radius-sm:   3px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ---- Transiciones ---- */
    --transition-fast:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* System grid texture de PROGNOSIS TALENTUM */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img, svg {
    display: block;
    max-width: 100%;
}

/* ---- Scrollbar personalizado ---- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--black-2); }
::-webkit-scrollbar-thumb { background: var(--cyan-3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ---- Focus visible accesible ---- */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}