/* =============================================
   Design tokens — Material Design 3
   Paleta: Agua/sky-blue seed #0288D1
   Tema por defecto: oscuro
   Tema claro: [data-theme="light"]
   ============================================= */
:root {
  /* ---- MD3 Color Tokens — dark theme ---- */
  --md-primary:                   #68D0FF;
  --md-on-primary:                #00344C;
  --md-primary-container:         #004C6B;
  --md-on-primary-container:      #C1E8FF;

  --md-secondary:                 #B2CBDA;
  --md-on-secondary:              #1C3240;
  --md-secondary-container:       #334958;
  --md-on-secondary-container:    #CEE5F5;

  --md-tertiary:                  #C0C3EE;
  --md-on-tertiary:               #29306A;
  --md-tertiary-container:        #404782;
  --md-on-tertiary-container:     #DDE0FF;

  --md-error:                     #FFB4AB;
  --md-on-error:                  #690005;
  --md-error-container:           #93000A;
  --md-on-error-container:        #FFDAD6;

  --md-surface-dim:               #0E1113;
  --md-surface:                   #171A1C;
  --md-surface-bright:            #353A3C;
  --md-surface-container-lowest:  #090C0E;
  --md-surface-container-low:     #171A1C;
  --md-surface-container:         #1B1E21;
  --md-surface-container-high:    #252A2C;
  --md-surface-container-highest: #303538;

  --md-on-surface:                #DEE3E7;
  --md-on-surface-variant:        #BFC8CE;
  --md-outline:                   #899297;
  --md-outline-variant:           #3E474B;

  /* ---- Legacy tokens → MD3 aliases ---- */
  --bg-page:        var(--md-surface-dim);
  --bg-surface:     var(--md-surface-container-low);
  --bg-elevated:    var(--md-surface-container);
  --bg-hover:       var(--md-surface-container-high);
  --border:         var(--md-outline-variant);
  --border-focus:   var(--md-primary);

  --primary:        var(--md-primary);
  --primary-hover:  #3dbcf2;
  --primary-light:  var(--md-primary-container);
  --primary-text:   var(--md-on-primary-container);

  --accent:         var(--md-tertiary);
  --accent-hover:   #9ea1d0;
  --accent-light:   var(--md-tertiary-container);
  --accent-text:    var(--md-on-tertiary-container);

  --success:        #81C995;
  --success-light:  rgba(129,201,149,0.15);
  --warning:        #FDD663;
  --warning-light:  rgba(253,214,99,0.15);
  --danger:         var(--md-error);
  --danger-light:   var(--md-error-container);
  --info:           var(--md-primary);
  --info-light:     var(--md-primary-container);

  --text-primary:   var(--md-on-surface);
  --text-secondary: var(--md-on-surface-variant);
  --text-muted:     var(--md-outline);
  --text-inverse:   #1B1E21;

  /* ---- Tipografía — Roboto ---- */
  --font-sans:  'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono:  'Roboto Mono', 'Fira Code', 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;

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

  /* ---- MD3 Shape Scale ---- */
  --radius-none: 0;
  --radius-xs:   4px;    /* Extra Small */
  --radius-sm:   8px;    /* Small */
  --radius-md:   12px;   /* Medium */
  --radius-lg:   16px;   /* Large */
  --radius-xl:   28px;   /* Extra Large */
  --radius-full: 9999px;

  /* ---- Sombras (MD3 usa tonal elevation, sombras mínimas en dark) ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
  --shadow-md:   0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
  --shadow-lg:   0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 20px rgba(104,208,255,0.25);
  --shadow-lime: 0 0 20px rgba(129,201,149,0.2);

  /* ---- Layout ---- */
  --sidebar-w:           256px;
  --sidebar-w-collapsed: 72px;
  --topbar-h:            64px;

  /* ---- Transiciones ---- */
  --transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* =============================================
   Tema claro
   ============================================= */
[data-theme="light"] {
  /* MD3 light theme tokens */
  --md-primary:                   #006590;
  --md-on-primary:                #ffffff;
  --md-primary-container:         #C1E8FF;
  --md-on-primary-container:      #001E2C;

  --md-secondary:                 #4D6472;
  --md-on-secondary:              #ffffff;
  --md-secondary-container:       #D0E5F5;
  --md-on-secondary-container:    #08202D;

  --md-tertiary:                  #555C8D;
  --md-on-tertiary:               #ffffff;
  --md-tertiary-container:        #DCE0FF;
  --md-on-tertiary-container:     #111944;

  --md-error:                     #BA1A1A;
  --md-on-error:                  #ffffff;
  --md-error-container:           #FFDAD6;
  --md-on-error-container:        #410002;

  --md-surface-dim:               #D5DBE0;
  --md-surface:                   #F5FAFF;
  --md-surface-bright:            #F5FAFF;
  --md-surface-container-lowest:  #ffffff;
  --md-surface-container-low:     #EFF5FA;
  --md-surface-container:         #E9EFF4;
  --md-surface-container-high:    #E3E9EE;
  --md-surface-container-highest: #DEE4E9;

  --md-on-surface:                #171C1E;
  --md-on-surface-variant:        #3E474B;
  --md-outline:                   #6E797D;
  --md-outline-variant:           #BDC8CC;

  --primary:        var(--md-primary);
  --primary-hover:  #004D6E;
  --primary-light:  var(--md-primary-container);
  --primary-text:   var(--md-on-primary-container);

  --accent:         var(--md-tertiary);
  --accent-hover:   #3D4475;
  --accent-light:   var(--md-tertiary-container);
  --accent-text:    var(--md-on-tertiary-container);

  --success:        #186A2F;
  --success-light:  rgba(24,106,47,0.1);
  --warning:        #7C5800;
  --warning-light:  rgba(124,88,0,0.1);
  --danger:         var(--md-error);
  --danger-light:   var(--md-error-container);
  --info:           var(--md-primary);
  --info-light:     var(--md-primary-container);

  --text-primary:   var(--md-on-surface);
  --text-secondary: var(--md-on-surface-variant);
  --text-muted:     var(--md-outline);
  --text-inverse:   #F5FAFF;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.04);
  --shadow-md:   0 1px 2px rgba(0,0,0,0.1), 0 2px 6px 2px rgba(0,0,0,0.05);
  --shadow-lg:   0 4px 8px 3px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 20px rgba(0,101,144,0.15);
  --shadow-lime: 0 0 20px rgba(24,106,47,0.1);
}